Kevin Powell - CommunityKP-C
Kevin Powell - Community•3y ago•
35 replies
DemonSlayer112

Image not taking 100% width

I am trying to learn how to size images better.
They have always been a pain to me. So i started learning object-fit.

Code:
<div style="width: 50%; border:5px solid black;">
    <img style="width: 100%; display: block; object-fit: cover;" src="assets/images/0c162elyzqia1.jpg"/>
</div>

The div is meant to take 50% if the page in width, and the img 100% of that.
Simple right?
Height of the div depends on height of image.
Image is display block as to not have the gap at the bottom inline elements do.
However...
image.png
Was this page helpful?