CSS - 根据宽度设置高度

Question

CSS - 根据宽度设置高度

5

我能否使用宽度来设置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;

标签的宽度始终相同，但高度有微小差异，导致其背景不完全适合。如果可以设置高度随宽度缩放，那就太完美了。

- MitchCool1

1个回答

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- user4639281 · Accepted Answer

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

填充属性的一个鲜为人知但非常有用的技巧是，如果提供的值是百分比，则计算出的值将是所包含块的宽度的百分比。

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

如果您想要高度与宽度相同，并且宽度设置为所包含块的25%，则应在元素上设置padding-bottom: 25%。
如果您想要高度是宽度的一半，并且宽度是所包含块的25%，则应设置padding-bottom: 12.5%
如果您想要高度是宽度的2.25倍，并且宽度是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;
}

<div id="keep-ratio"></div>