最大高度流畅的图像响应功能不适用于Chrome，Firefox等，但适用于Safari

Question

I'm trying to accomplish image resizing for height (I'm aware of width:100%, height:auto for width resizing). The below setup works in Safari (~8.02) but Chrome and Firefox (latest) don't care at all. Any ideas? If no CSS hacks exist, I'm open to jQuery solutions (I guess).

 body, html { width:100%; height:100%; } body { background: lightgreen; } .full { width:100%; } .block { background: lightcoral; width: 80%; text-align: center; position: absolute; } .logo { max-width: 100%; max-height: 80%; } 

 <div class="full"> <div class="block"> <img src="http://placehold.it/709x534" class="logo"> </div> </div> 

Answer 1

In addition to the CSS above, declaring a height of 100% on the container (in this case, .block) resolved the issue on Chrome and Firefox. It now matches Safari behavior as intended.

Answer 2

Are you trying to purposely distort your image after it goes beyond an 80% height? Check out this post... Max-height ignored in Firefox, works in Chrome and Safari

Answer 3

In addition to the CSS above, declaring a height of 100% on the container (in this case, .block) resolved the issue on Chrome and Firefox. It now matches Safari behavior as intended:

 body, html { width:100%; height:100%; } body { background: lightgreen; } .full { width:100%; } .block { background: lightcoral; width: 80%; text-align: center; position: absolute; height: 100%; } .logo { max-width: 100%; max-height: 80%; } 

 <div class="full"> <div class="block"> <img src="http://placehold.it/709x534" class="logo"> </div> </div>