CSS響應圖像不能呆在廣場

Question

我在SRC是動態加載的圖像，所以我不知道它的大小，我還需要保持敏感，所以我已經設置：

.resImg { 
    display:block; 
    border:5px solid yellow; 
    width:100%; 
    overflow: hidden; 
} 

問題是我需要保持圖像平方，但仍有百分比，但有些圖像顯示爲矩形。

我該怎麼做？

Answer 1

這裏有一個整潔的CSS技巧：

.resImg { 
 
    display:block; 
 
    border:5px solid yellow; 
 
    width:100%; 
 
    overflow: hidden; 
 
    padding-bottom:100%; 
 
    background:url(http://lorempizza.com/500/500) scroll no-repeat center/cover; 
 
}

<div class="resImg"></div>

它是如何工作的？

如果padding設置爲百分比，則該百分比是從元素的寬度計算的。如果要將元素設置得像寬一樣高，請將padding-bottom（或padding-top）設置爲100％，高度將爲寬度的100%。

要解決不同大小的圖像的問題，只需將圖像設置爲背景圖像，就像我在我的例子中那樣。

Here's a JSFiddle to play with

Answer 2

試試這個技巧：

.resImg { 
    display:block; 
    border:5px solid yellow; 
    width: 100%; 
    height: 0; 
    padding-bottom: 100%; 
    overflow: hidden; 
} 

Reference

Answer 3

這將有助於看到多一點你的CSS和HTML的，但你嘗試設置height: auto;當您設置寬度到100％？當寬度增加時，這將使圖像保持默認的寬高比，但是如果所有圖像都不是方形的，則可能需要採取不同的方法將它們平分而不失真。

雅各布的解決方案上面的工作很好，如果使用圖像作爲背景是一種選擇。