使用CSS实现将图片长宽设置为相等而且自适应屏幕

在图片长宽不相等的状况下，想将长宽设置为相等而且自适应屏幕，能够经过 js 的方式进行设置并经过监听 resize 来实时更新，可是这种方式很麻烦。 这里经过 css 来达到咱们想要的效果：
HTML:

<div class='box'>
    <img src="...">
</div>

须要添加一个父元素来达到咱们的目的。
CSS:

.box {
    position: relative;
    width: 50%;        /* desired width */
}
.box:before {
    content: "";
    display: block;
    padding-top: 100%;     /* initial ratio of 1:1*/
}

咱们在这里定义了一个伪元素而且将其 

padding-top

 设置为 100%，由于这里的 padding-top 是相对于元素的 width 的。
如今咱们定义了一个 

.box

 元素，它的长和宽是相等的，如今咱们只须要设置 img 的 CSS 便可:

.box img {
    position: absolute;
    top: 0;
    left: 0;
    bottom: 0;
    right: 0;
}

转载于猿2048:➜《使用CSS实现将图片长宽设置为相等而且自适应屏幕》