14
2020
07

css来控制img正方形自适应

该方法主要用来做网站自适应的,同时可以实现撑起内容高度。

实现方法很多,其中简洁的方法就是直接在img的父元素上加padding-bottom

<div class="img-box">
	<img src="123.jpg"/>
</div>
.img-box{
	padding-bottom:100%;
}
.img-box img{
	position:absolute;
	top:0;
	bottom:0;
	left:0;
	right:0;
	width:100%;
	margin:auto;
}


.img-box img里的宽度100%,高度100%就可以填满整个正方形框,如果都不填则自动水平居中和垂直居中div框内

« 上一篇下一篇 »

发表评论:

◎欢迎参与讨论,请在这里发表您的看法、交流您的观点。