2 qq 29408129 qq_29408129 于 2015.06.29 17:36 提问

css3怎么让背景宽为100%时,高度跟这个背景图等比例拉伸呢
 <style>
*{ margin:0; padding:0;}
.kech{ background-image: url(tu.jpg) ;background-size:100% auto;background-repeat: no-repeat; width:100%;}
.kech:before{content: ""; display: block; padding-top: 100%;}
.kech1 img{ width:100%;}

</style>
</head>

<body>
<div class="kech"></div>
<div class="kech1"><img src="tu.jpg"/></div>
</body>

我在网上找的,用:before,padding-top:100px;但是不对,就是想要kech跟kech1里的效果一样,当宽设置为100%时,背景等比例拉伸,就像把图片宽设置100%,高度自适应一样的效果

3个回答

Tiger_Zhao
Tiger_Zhao   Rxr 2015.06.30 14:03

widthbackground-size 不要一起用。只要下面这样就可以了。

    .kech{ background-image: url(tu.jpg) ;background-size:100%;background-repeat: no-repeat;}

Tiger_Zhao
Tiger_Zhao 又:仅靠背景图是不能影响<div>高度的。
2 年多之前 回复
vip_wst
vip_wst   2016.06.29 22:35

注意padding-top的值

* {
                margin: 0;
                padding: 0;
            }

            .kech {
                background-image: url(img/video-img.jpg);
                background-size: 100% auto;
                background-repeat: no-repeat;
                width: 100%;
            }

            .kech:before {
                content: "";
                display: block;
                padding-top: 60%; // 图片真实高度/宽度 * 100
            }

            .kech1 img {
                width: 100%;
            }
Hades1234567890
Hades1234567890 牛!!!
11 个月之前 回复
lovemrzhou
lovemrzhou   2016.01.13 17:23

我用这个方法,背景后面会有一块空白,跟下面的元素有间距,调padding-top小于100%,空白区域可以去掉,但是感觉有问题,怎么处理尼

Csdn user default icon
上传中...
上传图片
插入图片