<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%，高度自适应一样的效果
width 和 background-size 不要一起用。只要下面这样就可以了。
.kech{ background-image: url(tu.jpg) ;background-size:100%;background-repeat: no-repeat;}
我用这个方法，背景后面会有一块空白，跟下面的元素有间距，调padding-top小于100%，空白区域可以去掉，但是感觉有问题，怎么处理尼
注意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%;
}