CSS:使div宽度与高度成比例

Question

这有点难以解释,但是:我想要一个响应高度div(height: 100%),它将缩放与高度成比例的宽度(反之亦然).

我知道这种方法利用padding-top黑客来使高度与宽度成正比,但我需要它以相反的方式工作.话虽如此,我并不是非常热衷于对该方法中内容的绝对定位元素的额外要求,所以我意识到我可能会在这里要求月球.

为了帮助可视化,这是一个图像:

......这里是一个jsFiddle,说明了几乎相同的东西.

值得注意的是,我已经使用:before和:after伪元素垂直对齐我想按比例缩放的框的内容.

我真的非常非常喜欢不必恢复到jQuery,只是因为调整大小处理程序的内在要求以及通常更多的调试...但如果这是我唯一的选择,那么命令.

Answer 1

哦,你可能会使用那种"填充顶部"技巧.

width: 50%;
height: 0;
padding-bottom: 50%;

http://absolide.tumblr.com/post/7317210512/full-css-fluid-squares

要么:

.square-box{
    position: relative;
    width: 50%;
    overflow: hidden;
    background: #4679BD;
}
.square-box:before{
    content: "";
    display: block;
    padding-top: 100%;
}

http://codeitdown.com/css-square-rectangle/

CSS中的垂直填充与元素的宽度有关,而不是高度.

Answer 2

我一直想知道这个问题的纯css解决方案有一段时间了.我终于想出了一个使用ems的解决方案,可以使用vws逐步增强:

有关完整工作演示和说明,请参阅codepen链接:

http://codepen.io/patrickkunka/pen/yxugb

简化版:

.parent {
  font-size: 250px; // height of container
  height: 1em;
}

.child {
  height: 100%;
  width: 1em; // 100% of height
}

Answer 3

字体解决方案要求高度已知.我找到了一个解决方案,使元素在父div中具有未知宽度和高度的比例.这是一个演示.

我正在使用的技巧是将图像用作间隔物.代码解释说:

<div class="heightLimit">
 <img width="2048" height="2048" class="spacer"
  src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAA
       P///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7">
 <div class="filler">
  <div class="proportional">
  </div>
 </div>
</div>

所以它不是最漂亮的两个额外的div和一个无用的图像.但情况可能更糟.图像元素需要具有所需尺寸的宽度和高度.宽度和高度需要与允许的最大尺寸一样大(一个特征!).

css:

.heightLimit {
 position: absolute;
 top: 0;
 left: 0;
 height: 100%;
 width: auto;
 max-width: 100%;
 overflow: hidden;
}

此元素用于限制高度,但要水平扩展(width: auto),但永远不会超出父(max-width).需要隐藏溢出,因为有些孩子会突然出现在div之外.

.spacer {
 width: auto;
 max-height: 100%;
 visibility: hidden;
}

此图像与高度成比例不可见和缩放,同时调整宽度并强制调整父级的宽度.

.filler {
 position: absolute;
 top: 0;
 left: 0;
 bottom: 0;
 right: 0;
}

需要此元素以使用绝对定位的容器填充空间.

.proportional {
 position: relative;
 width: 100%;
 height: 0;
 padding-bottom: 100%;
}

在这里,我们的比例元素通过熟悉的填充底部技巧获得与宽度成比例的高度.

不幸的是,Chrome和IE中存在一个错误,因此如果您使用Javascript修改父元素,例如在我的演示中,尺寸将不会更新.有一个hack可用于解决这个问题,如我的演示中所示.