CSS - 根据宽度设置高度答案

【问题标题】：CSS - Set height according to widthCSS - 根据宽度设置高度
【发布时间】：2015-08-27 15:46:59
【问题描述】：

我可以在 CSS 中使用宽度设置高度吗？这就是我现在拥有的：

width: 22.5%;
height: width*2.25;
background: #fff url("images/image_bg.png");
background-repeat: no-repeat; 
background-size: cover;
border: 0.5px solid #ddd;

div 的宽度始终相同，但高度却有非常细微的差异，这使得它们的背景不适合。如果我可以将高度设置为与宽度一起缩放，那将是完美的。

【问题讨论】：

标签： html css

【解决方案1】：

填充
...
百分比：指包含块的宽度
http://www.w3.org/TR/CSS2/box.html#propdef-padding-right

padding 属性的一个鲜为人知但非常有用的技巧是，如果提供的值是百分比，则计算的值将是 的计算的 width 的百分比包含块

要保持纵横比不变，请使用padding-bottom: X%。

如果你想让height和width一样并且width设置为25% （包含块的）然后您将在元素上设置padding-bottom: 25%。
如果您希望高度为宽度的一半，宽度为25% （包含块）然后你会设置padding-bottom: 12.5%
如果您希望 height 为 2.25 乘以 width 并且 width 为 22.5% 然后将该百分比乘以 2.25 得到 56.25% 并应用该百分比，例如
padding-bottom: 56.25%
李>

#keep-ratio {
  width: 22.5%; /* 22.5% of the parent's width*/
  padding-bottom: 56.25%; /* (25% of the parent's width) * 2.25 */
  background: #fff url("//lorempixel.com/400/400");
  background-repeat: no-repeat; 
  background-position: center center;
  background-size: cover;
  border: 0.5px solid #ddd;
}

&lt;div id="keep-ratio"&gt;&lt;/div&gt;

【讨论】：

这个技巧我知道，但你是第一个准确指出标准的人，谢谢。
@intijk 你可能对this failed attempt at a canonical question on the topic感兴趣
我看到了这个。我尝试了 padding-top 动作，当动作状态变得复杂时，似乎不同的浏览器有不同的动作，所以我最终使用 javascript 来实现我的目的。