image height not being respected when declared in percentage

I have the following HTML markup:

    <div class="img-container"
      <img src="images/" alt="" /> <!-- width: 100%; -->
    </div>

    <div class="img-container">
      <img src="images/" alt="" /> <!-- width: 100%; -->
    </div>

^^^ I have 2 images that are each nested inside of a div. I have given the images a width of 100%, so they can take the full width of their parent. I have also given the img-container divs a width of 50%. Everything works fine and both the images take a width of 50% on the screen.

enter image description here

^^^ I never gave it a height value and this is how it shows up.

BUT when I actually give the height a value of 50% then I show up like this:

enter image description here

The width of 50% is working but the height of 50% is not working?

BUT WHY? Giving it a height in pixels work properly, but when I assign it a height in percentage, then it doesn't apply that height... Why is that?



Read more here: https://stackoverflow.com/questions/64396533/image-height-not-being-respected-when-declared-in-percentage

Content Attribution

This content was originally published by Oxin at Recent Questions - Stack Overflow, and is syndicated here via their RSS feed. You can read the original post over there.

%d bloggers like this: