图片自适应容器,避免拉伸失真
方式1
<div class="box">
<img src="#" />
</div>
.box{
width: 2000px;
height: 200px;
overflow: hidden;
border: 1px solid;
}
.box img {
//以宽为标准,填充div,超出的高度被hide
height: auto;
width: 100%;
//以高为标准,填充div,超出的宽度被hide
height: 100%;
width: auto;
}
方式2
<div class="box"></div>
.box {
width: 200px;
height: 200px;
background-image: url(../img/img1.jpg);
background-size: cover;
background-repeat: no-repeat;
background-position: center;
}
浙公网安备 33010602011771号