css less - 是否可以檢查元素大小？

Question

我有幾個用戶的縮略圖圖像，他們的形象可以是肖像或寬。

我希望縮略圖可以放在一個圓圈內而不會丟失它的寬高比。

所以我創造了這樣的每個圖像的容器：

<div class='container'> 
    <img src='' ... /> 
</div> 

有了這個CSS：

.container { 
    border-radius: 50%; 
    overflow: hidden; 
    position: relative; 
    width: 50px; 
    height: 50px; 

    img { 
    width: inherit; 
    } 
} 

因爲圖像寬度從容器繼承它正常工作與人像圖像。

現在的問題是要適應寬圖像......我應該用height替換以便按預期工作。

有我的更好的解決方案嗎？

或者有更少的方法可以達到這個目的嗎？

Answer 1

你應該離開width/height取消設置，並設置max-width/max-height到100%。

img { 
    max-width: 100%; 
    max-height: 100%; 
} 

這隻會縮小圖像，儘管不是高檔的。