纯CSS实现16:9等比例DIV容器

方法技巧 |  78人已阅 | 字体大小: 默认
本文共计424个汉字和字符,阅读时长预计2分钟左右。

DIV容器通过百分比设置宽度,根据设置宽度的比例数值*9/16(*是乘,/是除),计算出高度的百分比数值,设置DIV容器padding-bottom为计算出高度的百分比数值。
比如DIV容器宽度设置为100%,那么要设置高度的比例数值就是100%*9/16约等于56.25%,那么就设置这个DIV低边距padding-bottom:56.25%,高height:0;这样DIV容器始终是16:9等比例,要其他等比例可以改变16:9这两个数值。
例子:

<div class="chanbee">
<img src="" class="item"/>
</div>

 

css代码:

.chanbee {
width: 100%;
padding-bottom: 56.25%;
height: 0;
position: relative;
}

.item {
width: 100%;
height: 100%;
position: absolute;
}

简单的几句CSS代码就能实现固定等比例的DIV容器了

文章标签:
如需转载或复制本文请附带上 本文超链接 并注明出处: CHANBEE
本文标题: 纯CSS实现16:9等比例DIV容器
本文链接: https://www.chanbee.com/implementation-of-169-equal-scale-div-container-with-pure-css.html
发布日期: 2020-08-17
您可以分享本文到以下社交:

上一篇:

下一篇:没有下一篇了,本篇文章是最新的一篇

相关文章推荐

  • 纯代码让WordPress显示最新评论的文章

  • 让WordPress后台文章列表按最新修改来排序

  • 如何让WordPress分类页和标签页也能显示全部顶置文章

  • 通过CSS滤镜让网站彩色网页全站变成黑白色效果

  • 返回
    顶部