图片自适应容器,避免拉伸失真

方式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;
}

posted on 2022-01-28 21:00  In-6026  阅读(60)  评论(0)    收藏  举报

导航