该方法主要用来做网站自适应的,同时可以实现撑起内容高度。
实现方法很多,其中简洁的方法就是直接在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框内