使用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實現將圖片長寬設置爲相等而且自適應屏幕》