イメージタグを完全な円に強制する

Question

これは可能ですか？画像が完璧な四角でない場合でも、画像は完璧な円になりたいです。つまり、100px x 100pxです。そのコードで

.circle { 
border-radius: 50%; 
height: 100px; 
width: 100px; 
} 

画像が200×150である場合に、imgタグは、楕円形の形状であろう。イメージのサイズに関係なく完璧な円を得ることができますか？

<img class="circle" src="/link/to/img.jpg" height="80" width="80" /> 

Answer 1

いいえ、divにイメージをラップし、丸めを適用してオーバーフローを非表示にする必要があります。

ここでも私はフレックスボックスのイメージを中心にしていますが、これは必須条件ではありません。

.circle { 
 
border-radius: 50%; 
 
height: 100px; 
 
width: 100px; 
 
overflow: hidden; 
 
display: flex; 
 
justify-content: center; 
 
align-items: center; 
 
}

<div class="circle"> 
 
    <img src="http://www.fillmurray.com/460/300" alt=""> 
 
</div> 
 

 
<h2> Actual Image</h2> 
 

 
    <img src="http://www.fillmurray.com/460/300" alt="">