如何在保持宽高比的情况下使一个div始终保持在视口内

Question

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

它必须在视口范围内保持不变形 (即不裁剪到外面)，并保持其正方形形状 - 基本上复制CSS的 background-size: contain; 特性。

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

- Bryce

---

我以前遇到过这个确切的问题，但实际上并没有简单的答案。我希望有一个简单的答案，这会让我的生活变得更容易。可能需要一些JavaScript或jQuery。如果CSS只有width:50％; height:width;就好了。 - eshellborn

Answer 1

你可以在CSS中使用:after来设置它。

演示：http://jsfiddle.net/kevinPHPkevin/5tzk3/307/

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

解释：

这是通过在 div 中插入无内容的 :after，然后给 div 设置一个 padding-top 为 100% 的值来实现的，从而将 div 底部向下推。如果将其更改为例如 padding-top: 56.25%; 则会给出16:9的比例。padding 不会干扰 div 的内容，因为它是在 :after 中插入的，只有与此元素相关联的 :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;
}

- Kevin Lynch

---

@Vector，虽然这对于薄屏幕确实有效，但请注意宽视口将导致大框裁剪底部。 - Bryce

@BryceHanscomb 它并没有被裁剪在底部，它只是扩展以保持比例。 - Kevin Lynch

max-width和max-height可以很好地解决这个问题。 - eshellborn

如果您知道容器的大小，只能使用max-height和max-width值。我编写了一个简单的jQuery函数，动态地将主div“包含”在其容器中。http://jsfiddle.net/5tzk3/311/ - omma2289

@eshellborn 我习惯性地设置了这些位置值，但它们并不是必需的。http://jsfiddle.net/kevinPHPkevin/5tzk3/312/ - Kevin Lynch

Answer 2

关于 Vector 在底部裁剪方面的回答：

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

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

我知道原帖作者表示他们无法访问此功能。只是想指出，如果您像我一样找到了这个页面并且可以访问，则可以使用此方法。

- haxius