图片自适应容器,避免拉伸失真
方式1
.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
.box {
width: 200px;
height: 200px;
background-image: url(../img/img1.jpg);
background-size: cover;
background-repeat: no-repeat;
background-position: center;
}