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
Boeroe•7mo ago
Anyone?
jpbnetley
jpbnetley•7mo ago
Does the image load for you?
No description
Boeroe
Boeroe•7mo ago
Thats because its a file on my pc, so you cant see it in codepen
jpbnetley
jpbnetley•7mo 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•7mo ago
it becomes ridiculously small then 😅
jpbnetley
jpbnetley•7mo ago
No description
Boeroe
Boeroe•7mo ago
Yes haha , i cant find a way
Jochem
Jochem•7mo 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
Boeroe•7mo ago
And what about getting it underneath the text On smaller devices, now its dissapearing