Center the img perfect and get it responsive

Hi guys im running into a few problems: My image on a wider screen doesnt fit, even if i make the height bigger it will result that its not fitting on a normal laptop screen. How can i make it fit perfecty Also its not really responsive, the image dissapears when i make the screen smaller. I want the picuture underneath the text on mobiles etc. https://codepen.io/Boeroe/pen/wvNdKQM
Boeroe
CodePen
wvNdKQM
...
No description
9 Replies
Boeroe
BoeroeOP•15mo ago
Anyone?
jpbnetley
jpbnetley•15mo ago
Does the image load for you?
No description
Boeroe
BoeroeOP•15mo ago
Thats because its a file on my pc, so you cant see it in codepen
jpbnetley
jpbnetley•15mo ago
try this maybe? height: auto;
.img img {
width: 100%;
height: auto;
object-fit: cover;
object-position: center;
}
.img img {
width: 100%;
height: auto;
object-fit: cover;
object-position: center;
}
Think it then keeps the aspec ratio
No description
jpbnetley
jpbnetley•15mo ago
it becomes ridiculously small then 😅
jpbnetley
jpbnetley•15mo ago
No description
Boeroe
BoeroeOP•15mo ago
Yes haha , i cant find a way
Jochem
Jochem•15mo ago
if it doesn't fit, then it's probably time for a media query and a separate design for that screensize no amount of CSS is going to create space where it doesn't exist
Boeroe
BoeroeOP•15mo ago
And what about getting it underneath the text On smaller devices, now its dissapearing

Did you find this page helpful?