Responsive image
6 Replies
It works as expected, when the image is very wide, it will cut off top and bottom to prevent stretching as the screen gets even smaller, it cuts off the sides instead to prevent stretching. when this happens depends on the aspect ratio of the image.
If you don't want it to cut off anything, you can set
100% auto instead of cover. This means the width will be 100% and the height will be undefined
but you shouldn't set width:100%; on a div, div are block elements, block elements takes full width by default, setting width:100%; on a div is only going to cause overflow issuesKevin Powell
YouTube
CSS width auto vs 100% | What's the difference?
A look at the difference between width: auto and width: 100%
#css
--
Come hang out with other dev's in my Discord Community
š¬ https://discord.gg/nTYCvrK
---
Keep up to date with everything I'm up to
ā https://www.kevinpowell.co/newsletter
---
Help support my channel
šØāš Get a course: https://www.kevinpowell.co/...
It does not work this way somethings wrong
I need to define the height in that case
Defining height is creating a lot of white space and making text up and down
Aspect ratio may be a better property then height
Yeah, i agree with clevermissfox, if you set an expect ratio of the div, the height will be adjusted automatically based on the width. You can check the aspect ratio of the image itself in the devtools.
So you can set
aspect-ratio:512/207; on the div