html - CSS- 根据宽度设置高度

html - CSS- 根据宽度设置高度,第1张

我可以使用宽度在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的宽度始终相同,但高度差异很小,这使得它们的背景不合适。如果我可以将高度设置为与宽度成比例,那将是完美的。

最佳答案:

1 个答案:

答案 0 :(得分:2)

  

<强>填充
  ...
  百分比:指包含块的宽度
  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%

&#13; &#13;
#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;
}
&#13;
<div id="keep-ratio"></div>
&#13; &#13; &#13;

本文经用户投稿或网站收集转载,如有侵权请联系本站。

发表评论

0条回复