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

Question

存在一个方形div，它是一个任意百分比宽度（和相同数量的高），需要随窗口缩放。

它必须保持在视口的范围内（即：不在外面剪裁）并保持其方形 - 基本上复制了CSS的background-size: contain;功能。

我需要支持iOS Safari v3.2，因此我无法使用vw/vh/vmin/vmax并且强烈更喜欢仅支持CSS的解决方案。

Answer 1

您可以使用CSS中的:after

进行设置

DEMO 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的比例。在插入:after时，填充不会干扰div的内容，并且只有与此元素中的:after相关联的元素才会受到影响。在这种情况下，没有使用:after的元素，因为您总是使用新的div来实现此效果。

<强>被修改

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

停止扩展超过设置max-width和max-height

的点

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

Answer 2

跟进Vector关于底部裁剪的答案：

如果您有权访问vw / vh，则可以通过将max-width设置为视口高度的100％，并将max-height设置为视口宽度的100％来确保底部永不被裁剪。

e.g。 max-width: 100vh; max-height: 100vw;

我知道原始海报表明他们无法访问此内容。如果你发现这个页面就像我一样，并且DO可以访问，只需指出这一点。