如何将图像放置在一个盒子中,使其在宽度或高度上适合放置,以较小者为准？

Question

我想从服务器加载一些照片并在一个自己的盒子中显示每个照片,这样盒子就会被填满而图像居中(没有拉伸),如果它是大的话.我可以用CSS来实现这个,而不知道每个图像的大小吗？也许最大宽度左右？

这是我想要的一个例子:

Answer 1

您可以使用 CSS3background-size属性。

\n\n

具体来说，您可以使用background-size:contain或background-size:cover。

\n\n

从规格来看：

\n\n

\n

值有以下含义：

\n\n

\xe2\x80\x98包含\xe2\x80\x99

\n\n

将图像缩放到最大尺寸，同时保留其固有纵横比（如果有），使其宽度和高度都能适合背景定位区域。

\n\n

\xe2\x80\x98覆盖\xe2\x80\x99

\n\n

将图像缩放到最小尺寸，同时保留其固有纵横比（如果有），使其宽度和高度都可以完全覆盖背景定位区域。

\n

\n\n

来源：http ://www.w3.org/TR/css3-background/#the-background-size

\n\n

您使用哪一个取决于您使用的原始图像的长宽比。

\n\n

向下滚动此资源以查看一些示例：http://www.css3.info/preview/background-size/

\n