实现固定宽高比(width: height = 4: 3 )的div,怎么设置 |
您所在的位置:网站首页 › 宽高比2:3怎么设置 › 实现固定宽高比(width: height = 4: 3 )的div,怎么设置 |
# 实现固定宽高比(width: height = 4: 3 )的div,怎么设置 利用css中 padding百分比的计算方法: padding设置为百分比,是以元素的宽度乘以100%从而得到的padding值的。 在div的width为固定的情况下,设置height为0,使内容自然溢出,再通过设置padding-bottom使元素有一定高度。 .element { /* 16:9宽高比,则设padding-bottom:56.25% */ /* height: 0px, 防止矩形被里面的内容撑出多余的高度*/ width: 100vw; height: 0px; padding-bottom: 56.25%; background: pink; }利用将padding-top或padding-bottom设置成百分比,来实现高度满足宽度的某个比例。因为,当margin/padding取形式为百分比的值时,无论是left/right,还是top/bottom,都是以父元素的width为参照物的! css实现宽高比 Last Updated: 5/7/2020, 11:30:00 PM← 伪类和伪元素 css解析规则 → |
今日新闻 |
点击排行 |
|
推荐新闻 |
图片新闻 |
|
专题文章 |
CopyRight 2018-2019 实验室设备网 版权所有 win10的实时保护怎么永久关闭 |