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

相关文章推荐

打酱油的豆浆 · 编译器错误 C2259 | ...· 3 年前 ·

乐观的洋葱 · 京东商品评论情感分析:数据采集与词向量构造方 ...· 3 年前 ·

爱喝酒的茶叶 · feature andoid模块 - ...· 3 年前 ·

豁达的生姜 · tomcat启动批处理——catalina. ...· 3 年前 ·

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

div的高度随背景图片的高度变化：

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

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

推荐文章

打酱油的豆浆 · 编译器错误 C2259 | Microsoft Learn

3 年前

乐观的洋葱 · 京东商品评论情感分析:数据采集与词向量构造方法-腾讯云开发者社区-腾讯云

3 年前

爱喝酒的茶叶 · feature andoid模块 - 不允许使用应用插件。'com.android.feature'

3 年前

豁达的生姜 · tomcat启动批处理——catalina.bat-阿里云开发者社区

3 年前