为了账号安全,请及时绑定邮箱和手机立即绑定

CSS设置背景图宽度100%,高度自适应

标签:
CSS3

div的高度随背景图片的高度变化:
原理是通过padding-top或者padding-bottom实现,值是背景图片的宽高比。高度设置为0.

.newcenter{        width: 100%;        background: url('../../assets/img/newcenter.png') no-repeat;        background-size: 100% auto;
    }.newcenter:before{content: ""; display: block; padding-top: 100%;}

以上为第一种

.newcenter{        width: 100%;        background: url('../../assets/img/newcenter.png') no-repeat;        background-size: 100% auto;
    }.newcenter:before{content: ""; display: block; padding-top: 100%;}

以上为第二种;不过需要先确定背景图的长宽比,然后padding-top的值就位百分比的值

//仅做笔记用;

参考链接:https://www.jianshu.com/p/894dbab72f95

点击查看更多内容
1人点赞

若觉得本文不错,就分享一下吧!

评论

作者其他优质文章

正在加载中
感谢您的支持,我会继续努力的~
扫码打赏,你说多少就多少
赞赏金额会直接到老师账户
支付方式
打开微信扫一扫,即可进行扫码打赏哦
今天注册有机会得

100积分直接送

付费专栏免费学

大额优惠券免费领

立即参与 放弃机会
意见反馈 帮助中心 APP下载
官方微信

举报

0/150
提交
取消