1

Consider the two HTMLs

[1]:

<div style="height:100%">
    <div style="height:50%">
        <img src=test.jpg style="height:200%; width:100%" />
    </div>
</div>

[2]:

<div>
    <div>
        <img src=test.jpg style="width:100%" />
    </div>
</div>

Screenshot for chrome: https://i.stack.imgur.com/nvCXr.jpg

JSFiddle link (thanks to Sujay): http://jsfiddle.net/H8ZNc/show/light/

As far as I understand, in [1], the img tag looks to resolve height from its parent. That parent is also specified in percentage (50%) so it should again go up until it finds that there is no non percentage height specified. So it should ignore all heights and behave like [2].

I saw the question Percentage Height HTML 5/CSS where @bobince has mentioned "Whilst that height can also be a percentage if you want, that just moves the problem up to the next level." I wanted to know what really happens here.

It is also interesting to note that in Firefox, both the HTMLs render like [2] is rendered in Chrome.

Community
  • 1
  • 1
vijayvenkatesans
  • 33
  • 1
  • 6
  • JSfiddles will be more useful than a screenshot – Sujay Apr 15 '14 at 06:44
  • http://jsfiddle.net/H8ZNc/show/light/ - I created one for you. I see a very similar rendering in IE11, FF 28 & Chrome 34. What browser versions are you checking with? – Sujay Apr 15 '14 at 07:23
  • Thanks. Will keep that in mind next time. I am also using FF28 and Chrome 34. Try reducing the width of the browser. You should see that the height remains the same in Chrome, but it changes according to the aspect ratio in FF. – vijayvenkatesans Apr 15 '14 at 10:55

0 Answers0