在保持寬高比的同時使整個圖像呈圓形

Question

我試圖以圓形形式顯示整個圖像（不裁剪或隱藏其任何部分），同時保持寬高比。 我只想使用CSS。

我嘗試了這個：

#propic
{
width:150px;
height:150px;
background-size:cover;
display:block;
border-radius:100px;
-webkit-border-radius:100px;
-moz-border-radius:100px;
}

確實以圓圈形式顯示了我的圖像，但沒有保持寬高比。 我再次嘗試了這個：

#propic
{
width:150px;
height:auto;
background-size:cover;
display:block;
border-radius:100px;
-webkit-border-radius:100px;
-moz-border-radius:100px;
}

確實保持了長寬比，但形狀變成了橢圓形。 我該如何實現？

提前致謝。

Answer 1

由於div是一個圓圈，因此您不清楚“保持寬高比”是什么意思。 如果您在寬幅圖像上保持寬高比，則會在頂部和底部留出空白區域以適應圓的寬度

 #propic { width:150px; height:150px; border-radius:50%; background-image: url(http://lorempixel.com/g/400/200/); background-position: center; background-size:100% auto; background-repeat: no-repeat; } 

 <div id="propic"></div> 

另外，您也可以左右裁剪圖像，以使圖像仍保持100％高

background-size:auto 100%;

JSfiddle第二個選項