最大高度等于最大宽度

时间:2014-07-08 17:01:50

标签: html css image sass aspect-ratio

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

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

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

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

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

2 个答案:

答案 0 :(得分: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;
}

答案 1 :(得分:0)

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