Question

有没有办法只使用CSS将div的高度设置为永远不会超过其宽度？

我有一系列图像 - 肖像和风景。我目前正在将div设置为宽度为100％且top-padding为66.6666666%的div，这会将图像限制在1：1.5的比例范围内。

这对于风景来说很好，但是对于肖像来说，这意味着它们永远不会比风景宽度为100％更高，因此肖像图像的总面积远远小于风景。

如果我将容器比例设置为1：1（top-padding为100%），则肖像可以达到与景观宽度相同的高度，但这意味着景观有额外的垂直空间。

我正在寻找一种方法将每个图像约束到一个正方形区域，如果它不需要它就没有额外的空间。

Answer 1

您可以使用vw单位实现所需的行为：

vw：视口宽度的1/100。（来源：MDN）

<强> DEMO

IE9 +（canIuse）

支持vw单位

HTML：

<div>
    <img src="http://lorempixel.com/output/people-q-g-1200-600-6.jpg" alt="" />
</div>
<div>
    <img src="http://lorempixel.com/output/people-h-g-600-1200-9.jpg" alt="" />
</div>

CSS：

div{
    width:100%;
    max-height:100vw;
}
div > img{
    max-width:100%;
    max-height:100%;
    width:auto;
    height:auto;
    display:block;
    margin:0 auto;
}

Answer 2

您应该能够在图像的容器上设置高度（或宽度），默认情况下，图像应该适合使用CSS中的“background-size：contains”。

最大高度等于最大宽度

2 个答案: