如何在保持纵横比的同时保持视口中包含的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/

阻止它扩展到一个点集a max-width和max-height

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