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

存在一个正方形的div是任意％的宽（和相同的量高），其需要与窗口成比例。如何保持包含在视口内一个div同时保持纵横比

它必须保持在可视区域的范围内（即：没有限外），并保持其方形 - 本质上复制CSS的background-size: contain;功能。

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

enter image description here

来源

2013-08-18 Bryce

我以前有这个确切的问题，但真正有没有一个简单的答案。我希望有，这会让我的生活变得更轻松。可能有些javascript或jquery可能是有序的。如果只有CSS有宽度：50％;高度宽度; – eshellborn

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

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

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

说明：

这是通过将没有内容:after，然后给DIV填充100％的顶部，从而推高了底部下。如果您将其更改为padding-top: 56.25%;，则该比例将为16：9。填充不会影响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; 
}

来源

2013-08-18 06:45:12 Vector

+1非常好，你能解释那里真的发生了什么吗？ – Shomz

不幸的是，这是不正确的。请注意，在演示中，如果将'.wrapper'宽度更改为类似90％的大小并调整窗口大小，则正方形会开始被切断，但无法处理。 – Bryce

@Shomz，谢谢，我添加了一个解释。 – Vector

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

如果你有机会到VW/v ...你能保证底部永远不会被通过设置最大宽度剪裁成视高度的100％，并且最大高度是视口宽度的100％。

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

我知道原来的海报表示他们没有访问权限。只要指出这一点，如果你发现这个网页就像我做了，并有权访问。

来源

2017-05-15 17:32:04 haxius

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

回答

相关问题