Question

这很奇怪！

使用模仿谷歌文档演示编辑器的跨浏览器超级简单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中，如果您调整浏览器高度（只是高度），则＆lt; img＆gt;标签被压缩，直到浏览器宽度也被调整。如果您调整宽度和高度，它会完全缩放。

这是小提琴：http://jsfiddle.net/zb5ek/

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

Answer 1

试试这个

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

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

Answer 2

您将height的{{1}}设为.preview img，将90%设为width。但auto并不意味着“匹配其他尺寸参数”。 W3C explains auto表示“宽度取决于其他属性的值。”

The standard gives this explanation（相关部分加粗）：

10.3.2内联，替换元素

'margin-left'或'margin-right'的计算值'auto'变为   使用值'0'。

如果'height'和'width'都计算出'auto'和。的值   element也有一个固有的宽度，那么内在的宽度就是   使用'width'的值。

如果'height'和'width'都计算出'auto'和。的值   element没有固有的宽度，但确实有一个固有的高度和   内在比率;或者如果'width'的计算值为'auto'，   'height'有一些其他计算值，元素确实有   内在比率;那么'width'的使用值是：

（使用高度）*（固有比率）

如果'height'和'width'都计算出'auto'和。的值   因此，元素具有固有比率但没有固有的高度或宽度   在CSS 2.1中，'width'的使用值未定义。但是，确实如此   建议，如果包含块的宽度本身不依赖   在替换元素的宽度上，则'width'的使用值为   根据用于块级的约束方程计算，   正常流程中未被替换的元素。

否则，如果'width'的计算值为'auto'，则为元素   具有固有宽度，然后该固有宽度是使用的值   '宽度'。

否则，如果'width'的计算值为'auto'，但是没有   满足上述条件，然后使用'width'的值   300像素。如果300px太宽而不适合设备，UA应该使用   宽度最大的矩形，比例为2：1，适合   而不是设备。

Answer 3

多次出现这个仅限Chrome的问题，我学会了制作一个特定于图像的.css标签。它可能不满足规范，但它适用于所有浏览器。至少它确实尽我所能。

例如，今晚我将222x1048像素的图像嵌入到文本块中。我决定图像需要更高的高度，所以我将图形重新设计为222x1744像素，并在html中进行了适当的更改。但是，Chrome不会接受新的高度值并截断图像以适应222x1048。（正如有人写的那样，压扁它）BTW，刷新Chrome缓存没有影响。

原始代码为：

.rghtimgd
{
    text-align: right;
    float: right;
    margin: 11px 0 0 22px;
    clear: left;
}

现在新代码如下：

.rghtimgdxt
{
    text-align: right;
    float: right;
    margin: 11px 0 0 22px;
    clear: left;
    height: 1744px;
    width: 222px;
}

我想这很乏味，但现在图像正确呈现。这种跨浏览器的不一致性让我分心，但我拒绝被代码问题所困扰。

Answer 4

宽度：自动在图片上目前仍然是Chrome中的错误。

我在这里填写了一份错误报告：

https://code.google.com/p/chromium/issues/detail?id=503000

浏览器高度上的Chrome Squishing <img/>调整大小

4 个答案: