html - Chrome Squishing 在浏览器高度调整大小

Question

这很奇怪!

正在开发一个模仿 google 文档演示文稿编辑器的跨浏览器 super 简单 UI。我发现的问题是 UI 的右侧部分，其中包含大型幻灯片/图像预览和随附的“注释”抽屉。

我的基本 html 骨架:

<div class="container">

    <div class="preview">
        <img src="http://lorempixel.com/800/600/business" />        
    </div>

    <div class="otherthing">
        This is another UI thing, 20% height    
    </div>

</div>

以及通过浏览器调整大小处理流体缩放的 CSS:

body, html{
    width:100%;
    height:100%;
}

*{
    box-sizing:content-box; /* ie */
    box-sizing:border-box; /* all others */
    -moz-box-sizing:border-box; /* except firefox */
}

.container{
    width:100%;
    height:100%;
    position:relative;
}

.preview{
    width:100%;
    height:80%;
    position:relative;
    text-align:center;
}

.preview img{
    height:90%;
    width:auto;    
}

.otherthing{
    width:100%;
    height:20%;
    background:#369;
}

这适用于 Firefox、Safari、Opera 和 IE 回到 8!然而，在 Chrome 中，如果你调整浏览器高度(只是高度)， 标签会被挤压，直到浏览器宽度也被调整。如果同时调整宽度和高度，它可以完全缩放。

这是 fiddle :http://jsfiddle.net/zb5ek/

任何人都知道发生了什么/我能做些什么来解决这个问题？当你发现一个仅限 Chrome 的错误时，这是​​一个黑暗的日子:)

Answer 1

试试这个

.preview img{
    max-height:90%;
    max-width:100%;    
}

使用 max-height 和 max-width 将使它按比例缩放。