html - 如何将图像放置在盒子中，以使其适合宽度或高度（以较小者为准）？

Question

我想从服务器加载一些照片并将它们中的每一个显示在一个自己的盒子中，这样盒子被填充并且图像居中（不拉伸），如果它太大的话。例如，我可以在不知道每个图像大小的情况下使用 CSS 实现这一点吗？也许有最大宽度左右？

这是我想要的一个例子：

一个例子。

score 3 · Accepted Answer

3

于 2012-04-10T18:20:30.817 回答

score 0 · Accepted Answer

您可以做的最快的事情是将图像作为居中的背景图像：

style="background: url(images/42.png) 50% 50% no-repeat"

小于框的图像将在框中居中。较大的图像会被裁剪。

缺点是没有缩放。

对于缩放，您必须知道尺寸，使用一些数学来计算将保留纵横比的缩放量，并使用位于使用“溢出：隐藏”的裁剪容器内的实际元素。

score 0 · Accepted Answer

在这里你做什么。例如，如果图像位于 ID 为“boxer”的 DIV 中，您现在将创建一个 CSS，该 CSS 将自动调整 ID 为“boxer”的 DIV 中的每个图像的大小 CSS 将如下所示

#boxer img {
 Width: 600px
 Height: 600px;
}

上面的 CSS 会自动根据 CSS 中的规范重新调整您放入的任何图像的大小。如果尺寸与 CSS 的尺寸相对应，这将精确地适合 ID 为“boxer”的盒子。你可以对宽度和高度都做 100%，这样它就适合盒子。

3 回答 3