可调整大小的DIV内的流体图像

Question

我正在尝试在可调整大小的DIV内拟合流畅的图像。图像必须保持其比例，并且永远不会超过100％（宽度和高度） - 即使包含DIV大于图像。

图像也必须水平和垂直居中。 Chrome和Safari完美地实现了这一点--Internet Explorer 10没有。

我已快速设置jsfiddle来说明问题。

HTML：

<div id="diver">
    <img src="http://ie.microsoft.com/testdrive/Performance/Minesweeper/images/ie-logo.png" style="" />
</div>

和css：

#diver {
    border:1px solid #000000;
    width:200px;
    height:200px;
    text-align:center;
    display: table-cell;
    vertical-align: middle;
}

img {
    max-width:100%;
    max-height:100%;
}

尝试在Chrome中将框大小调整为小于100％的宽度和高度，您将获得与这些图像类似的内容：

高度低于100％：

宽度小于100％：

但是，Internet Explorer 10只能缩放高度。宽度不会低于100％，这是主要问题。

我可以让IE扩展宽度，类似于Chrome / Safari，但它需要将DIV高度（是，高度）设置为低，例如10px，这是很奇怪的imo。< / p>

我知道可以在javascript中动态缩放图片，但是当Internet Explorer应该能够正确处理缩放时，我不会看到需要额外的javascript。

Answer 1

表格单元格和尺寸约束

问题出现在IE，Firefox和Opera中。将display: table-cell与max-width: 100%和max-height: 100%结合使用会导致这种情况。在这种情况下，表格单元格与具有display: block的元素的行为不同。

它与可调整大小的容器无关。它也与对齐内容无关（尽管这可能是使用display: table-cell的动机）。两者都可以暂时从等式中删除，以便将代码减少到最简单的状态，在这种状态下仍然可以再现潜在的问题。

Simplified Demo

在simplified demo中，有一对图像和一对蓝色背景的span标签。在每对中，第一个使用display: block，第二个使用display: table-cell。 CSS的其余部分是相同的。

对于每一个，如果CSS成功，图像的宽度和高度或span将减少到100px。如果没有，宽度或高度将保持在200px。

图片

• 使用display: block时，它适用于所有浏览器。
• 使用display: table-cell时，Chrome和Safari（Webkit浏览器）工作正常，而IE，Firefox和Opera无法缩小图像的宽度。

span标记

• 使用display: block时，它适用于所有浏览器。
• 使用display: table-cell时，Chrome和Safari无法减小宽度和高度，而IE，Firefox和Opera无法缩小宽度。

对于图像，行为与测试添加到问题中的原始演示的结果一致。

这是一个updated version of the original demo，用蓝色背景的跨度替换图像，这可以更清楚地说明Chrome和Safari中存在的潜在问题。如果将演示更改为使用display: block，则内容的大小调整在所有浏览器中都能正常工作（尽管对齐会丢失）。

的jQuery

除非找到一种方法来正确调整表格单元格中图像的大小，否则在这样的简化情况下，为原始演示解决此问题可能需要添加一些额外的jQuery，或尝试更高级的CSS3功能，如flexbox或grids。

如果需要额外的jQuery，它可以用于图像的对齐（以便display: block可以用于容器），或者它可以用于调整图像的大小（删除使用max-width: 100%和max-height: 100%的{​​{1}}，以便display: table-cell可用于对齐。）

在任何一种情况下，jQuery UI Resizable都有resize event可用于此目的。

Answer 2

如果您执行以下操作，则会使最大宽度在Internet Explorer 10中起作用。

#diver {
    border:1px solid #000000;
    width:200px;
    height:200px;
    text-align:center;
    /*display: table-cell;*/
    vertical-align: middle;    
}

我认为这解决了一半的问题，因为图像的垂直对齐丢失了。 赏金将激励我进一步研究这个问题;）