CSS圖片寬度設置百分比 , 高度同寬度相同

在圖片長寬不相等的情況下，想將長寬設置為相等並且自適應屏幕，可以通過 js 的方式進行設置並通過監聽 resize 來實時更新，但是這種方式很麻煩。

這里通過 css 來達到我們想要的效果：

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

需要添加一個父元素來達到我們的目的。

.box {
    position: relative;
    width: 50%;
}
.box:before {
    content: "";
    display: block;
    padding-top: 100%;
}

或者:

.box{
    position: relative;
    width: 50%;
    height: 0;
    padding-bottom: 50%;
}

我們在這里定義了一個偽元素並且將其 padding-top 設置為 100%，因為這里的 padding-top 是相對於元素的 width 的。

現在我們定義了一個 .box 元素，它的長和寬是相等的，現在我們只需要設置 img 的 CSS 即可:

.box img {
    position:  absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}