使用CSS保持div的长宽比[重复]

Question

这个问题已经在这里有了答案：

• 使用CSS 22答案 保持div的长宽比

使用最大高度选项可以保持DIV的宽高比吗？

有一个解决方案，以保持宽高比：

div.stretchy-wrapper {
  position: relative;
  width: 100%;
  padding-bottom: 75%;
  background:gold; /** <-- For the demo **/
}

div.stretchy-wrapper > div {
  position: absolute;
  top: 0; bottom: 0; left: 0; right: 0;
}

它可以完美工作，但是如果要保持DIV可调整大小但又达到一定的高度怎么办？ 假设我要在DIV高度达到200像素后停止调整大小。 有任何想法吗？ 谢谢你提前。

Answer 1

因为您要保持恒定的纵横比，所以只需找出元素的宽度在所需的最大高度下，然后设置max-width属性即可。

在这种情况下，要阻止div高度为200px时重新调整大小，您需要设置max-width: 266.666px 。

 .stretchy-wrapper { position: relative; width: 100%; max-width: 266.666px; } .ratio { position: relative; width: 100%; padding-bottom: 75%; background: gold; } 

 <div class='stretchy-wrapper'> <div class='ratio'> </div> </div>