如何在保持纵横比的同时将 div 包含在视口内

存在一个正方形 div，其宽度为任意百分比（并且高度相同），需要随窗口缩放。

它必须保持在视口的范围内（即：不剪裁到外部）并保持其正方形形状 - 本质上是复制background-size: contain;CSS 的特性。

我需要支持iOS Safari v3.2，所以无法使用vw/vh/vmin/vmax并且会strongly更喜欢纯 CSS 解决方案。

您可以使用它来设置:after in CSS

DEMO http://jsfiddle.net/kevinPHPkevin/5tzk3/307/ http://jsfiddle.net/kevinPHPkevin/5tzk3/307/

.wrapper:after {
    padding-top: 100%; /*Sets ratio*/
    display: block;
    content: '';
}

解释：

这是通过不插入内容来实现的:after然后给div一个100%的填充顶部，从而将div的底部向下推。如果你把它改成，比如说，padding-top: 56.25%;它将给出 16:9 的比例。插入时填充不会干扰 div 的内容:after并且仅与关联的元素:after该元素内的内容将受到影响。在这种情况下，没有元素使用:after因为您总是使用新的 div 来实现此效果。

Edited

DEMO http://jsfiddle.net/kevinPHPkevin/5tzk3/309/ http://jsfiddle.net/kevinPHPkevin/5tzk3/309/

阻止它扩展到超出某个点，设置一个max-width and max-height

.wrapper {
    width: 50%;
    display: inline-block;
    position: relative;
    max-height:350px;
    max-width:350px;
}