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

Question

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

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

我需要支持 iOS Safari v3.2，所以我不能使用vw/vh/vmin/vmax并且强烈希望使用纯 CSS 解决方案。

Answer 1

您可以:after在 CSS 中使用它进行设置

演示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 来实现此效果。

已编辑

演示http://jsfiddle.net/kevinPHPkevin/5tzk3/309/

阻止它扩展超出点集 amax-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% 来确保底部永远不会被裁剪。

例如 max-width: 100vh; max-height: 100vw;

我知道原始海报表明他们无权访问此内容。如果您像我一样找到此页面并且确实可以访问，请指出这一点。