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

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

它必须保持在视口的边界内（即：不在外部剪裁），并保持其方形形状-基本上复制

背景大小：containCSS的特性

我需要支持iOS Safari v3.2，因此我不能使用
vw/vh/vmin/vmax
，我强烈希望只使用CSS解决方案

您可以使用CSS中的
：after
进行设置

演示

说明：

其工作原理是：在

之后不插入任何内容，然后给div一个100%的填充顶部，从而将div的底部向下推。如果你把它改成，比如说，

paddingtop:56.25%它将给出16:9的比率。填充不会干扰div的内容，因为它插入
：after
，并且只有与此元素中
：after
关联的元素才会受到影响。在这种情况下，没有使用
：after
的元素，因为您总是使用新的div来实现此效果

已编辑

演示

若要阻止其扩展到点以外，请设置一个
max width
和
max height

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

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

如果您可以访问vw/vh，则可以通过将“最大宽度”设置为视口高度的100%，将“最大高度”设置为视口宽度的100%，确保底部不会被裁剪

e、 g。
最大宽度：100vh；最大高度：100vw

我知道最初的海报表明他们没有接触到这个。如果你像我一样找到这个页面并且确实可以访问，请指出这一点。
我以前也遇到过这个问题，但没有一个简单的答案。我希望有，这会让我的生活轻松很多。可能需要一些javascript或jquery。如果CSS有宽度：50%；高度：宽度；不幸的是，这是不正确的。请注意，在您的演示中，如果您将
.wrapper
宽度更改为90%左右并调整窗口大小，则正方形开始在无法处理它的大小上被截断。@Vector，而这确实适用于薄屏幕，请注意，宽视口将导致大框从底部裁剪。max width和max height可以很好地修复它。如果您知道容器的大小，则只能使用max height和max width值。我制作了一个简单的jquery函数，动态“包含”容器@eshellborn中的主div我习惯性地设置这些位置值，它们不是必需的
.wrapper {
    width: 50%;
    display: inline-block;
    position: relative;
    max-height:350px;
    max-width:350px;
}