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.
^^^ 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:
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?