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

方式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   In-6026  阅读(50)  评论(0编辑  收藏  举报

相关博文:
阅读排行:
· Manus爆火,是硬核还是营销?
· 终于写完轮子一部分:tcp代理 了,记录一下
· 别再用vector<bool>了!Google高级工程师:这可能是STL最大的设计失误
· 单元测试从入门到精通
· 震惊!C++程序真的从main开始吗?99%的程序员都答错了
点击右上角即可分享
微信分享提示