CSS实现高度等于宽度自适应(非JS)

2020年10月20日 05:26:15益点益滴374

在自适应网页布局中,特别是在移动端,我们偶尔会需要某一元素宽高等比例自适应,方形图片最为常见。若只是单纯在移动端表现,宽高样式统一使用相同vw单位就可以实现等比例自适应,而需要考虑多终端时,如果不考虑使用JS运算,还可以用如下代码实现:

<style type="text/css">
#container {
    width: 80%;
    height: 500px;
}

.attr {
    width: 50%;
    height: 0;
    padding-bottom: 50%;
    background-color: #008b57;
}
</style>
<div id='container'>
    <div class='attr'></div>
</div>

或者:

<style type="text/css">
.img-div {
    position: relative;
    width: 100%;
    height: 0;
    padding-bottom: 100%;
}
img {
        position:absolute;
        top:0;
        left:0;
        width:100%;
        height:100%;
}
</style>
<div class='img-div'>
    <img src='http://www.yiwuku.com/zb_users/theme/erx_Yiwuku/images/qrcode.png'>
</div>

从以上两段代码原理不难看出共同点,样式都利用了padding-bottom百分比值是相对父元素的宽度来算这个知识点,不得不说这样处理也是十分巧妙。

超赞,真给力!嗯,必须鼓励~

打赏 0

欢迎点评!或反馈疑问...

支持Ctrl+Enter提交
暂无留言,快抢沙发!
账号:mxy310@163.com[复制]
账号:77940140[复制]