我可以在 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 的宽度始终相同,但高度有非常细微的差异,这使得它们的背景不合适。如果我可以将高度设置为与宽度成比例,那就完美了。
padding
...
百分比:指包含块的宽度
http://www.w3.org/TR/CSS2/box.html#propdef-padding-right http://www.w3.org/TR/CSS2/box.html#propdef-padding-right
padding 属性的一个鲜为人知但非常有用的技巧是,如果提供的值是百分比,则计算值将是计算值的百分比width of the 包含块
为了保持纵横比完好无损,使用padding-bottom: X%
.
如果你想要height与width和width被设定为25%(包含块的)然后你会设置padding-bottom: 25%
在元素上。
如果你想要height成为一半width和width is 25%(包含块的)然后你会设置padding-bottom: 12.5%
如果你想要height to be 2.25倍width和width is 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>
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)