2

我正在尝试在可调整大小的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% 高度

小于 100% 宽度：

小于 100% 宽度

然而，Internet Explorer 10 仅缩放高度。宽度不会低于 100%，这是主要问题。

我可以让 IE 缩放宽度，类似于 Chrome/Safari，但它需要将DIV高度（是的，高度）设置为较低的值，比如 10px，这在 imo 中有点奇怪。

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

4

2 回答 2

2

表格单元格和大小限制

该问题出现在 IE、Firefox 和 Opera 中。这是与和display: table-cell结合使用引起的。在这种情况下，表格单元格的行为与带有.max-width: 100%max-height: 100%display: block

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

简化演示

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

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

图片

  • 使用时display: block，它在所有浏览器中都能正常工作。
  • 使用时display: table-cell，Chrome 和 Safari（Webkit 浏览器）工作正常，而 IE、Firefox 和 Opera 无法减小图像宽度。

跨度标签

  • 使用时display: block，它在所有浏览器中都能正常工作。
  • 使用 时display: table-cell，Chrome 和 Safari 无法减小宽度和高度，而 IE、Firefox 和 Opera 无法减小宽度。

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

这是原始演示的更新版本，将图像替换为蓝色背景的跨度，这可以更清楚地展示 Chrome 和 Safari 中存在的潜在问题。如果将演示更改为 use display: block，则内容的大小在所有浏览器中都可以正常工作（尽管失去了对齐）。

jQuery

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

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

在任何一种情况下，jQuery UI Resizable都有一个可用于此的调整大小事件。

于 2013-05-06T16:44:05.647 回答
1

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

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

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

于 2013-05-06T13:03:24.200 回答