Cannot get Firefox or IE to respect max

 

I realize similar questions have been asked. I have researched them all, yet still failed to find a fix for my specific situation.

Please check out this debug page:

[removed]

If you would open this page in Chrome or Safari, you will notice the following behavior:

  • When resizing the browser window horizontally, the image grows and shrinks in width, yet with respect for a maximum height of 100% of the browser window.
  • When resizing the browser window vertically, a height of 100% is enforced, and the width may shrink, or grow according to the aspect ratio of the image, up to a certain maximum.

    • The above is the desired behavior that I want to deliver across browsers. However, I cannot get this to work properly in Firefox and IE (10). It seems the max-height property is not respected. The result is that on wider viewports, the height of the image is larger than the browser window, and it gets cut off.

    My pseudo html structure on this page is as follow: 

    html -> body -> image-container -> image-wrapper -> img

    The img element has no explicit width or height set inline, I control this in CSS: 

    #image-container img.tall {
display:block; 
max-height:100%; 
width:auto; 
max-width:100%;
}

    I've read from other questions, that all parent elements of the img element (such as html, body) need to be set to height:100%; This is true for my implementation, yet max-height still does not seem to be respected, and the problem only occurs in Firefox and IE.

    Note: I'm using box-sizing:border-box on all elements.

    Silly me, although I did set height:100% on html and body, I did not set it on #image-wrapper. There I had max-height:100% only.

    链接地址: http://www.djcxy.com/p/64500.html

    上一篇: 高度）在Firefox中不起作用

    下一篇: 无法让Firefox或IE尊重最大