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

Question

这有点难以解释，但是：我想要一个响应高度div（height: 100%），它会缩放与高度成比例的宽度 （反之亦然）。

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

为了帮助可视化，这是一张图片：

...这里是jsFiddle，说明了几乎相同的事情。

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

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

Answer 1

哦，你可以使用那个＆＃34; padding-top＆＃34;特技。

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中具有未知宽度和高度的比例。 Here is a demo

我使用的技巧是将图像用作间隔物。代码解释说：

<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可用于解决这个问题，如我的演示所示。

Answer 4

根据@ kunkalabs的答案（非常聪明）我提出了一个解决方案，可以保留继承的字体大小。

HTML：

<div id='rect'>
    <div id='content'>Text</div>
</div>

CSS：

#rect {
    font-size: 1000%;
    height: 1em;
    width: 1em;
    position: relative;
}

#content {
    font-size: 10%;
}

所以基本上#content的字体大小是（100 / $ rectFontSize）*矩形的100％。如果您需要矩形的确定像素大小，您可以设置#rect的父级字体大小...否则只需调整字体大小，直到它在您想要的位置（并激活您的设计师）处理）。

Answer 5

您可以将视图高度（vh）用作宽度的单位。

以下是您要求的20px边距的示例。

 .parent {
   margin : 20px;
}
.child {
   width: calc(100vh - 40px);
   height : calc(100vh - 40px);
   margin:0 auto;
   background: red;
   box-sizing:border-box;
   padding:10px;
}

参见小提琴： https://jsfiddle.net/svobczp4/

Answer 6

您可以通过使用SVG来实现。

这取决于情况，但在某些情况下确实有用。例如，您可以设置background-image而不设置固定高度，也可以使用它以<iframe>和16:9的比率嵌入position:absolute。

对于3:2比率，设置viewBox="0 0 3 2"，依此类推。

示例：

div{width:35%;background-color:red}
svg{width:100%;display:block;visibility:hidden}

<div>
  <svg viewBox="0 0 3 2"></svg>
</div>

Answer 7

使父DIV的行为类似于表格单元格并垂直对齐子元素。不需要做任何填充技巧。

HTML

<div class="parent">
<img src="foo.jpg" />
</div>

CSS

.parent { width:300px; height:300px; display:table-cell; vertical-align:middle; }