Forza il tag immagine come cerchio perfetto

Question

È possibile? Voglio che l'immagine sia un cerchio perfetto, non importa se l'immagine non è un quadrato perfetto, ovvero: 100px x 100px.

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

Con questo codice, se l'immagine è 200x150, il tag img sarebbe nella forma di un ovale. Posso ottenere un cerchio perfetto indipendentemente dalle dimensioni dell'immagine?

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

Answer 1

No, è necessario avvolgere l'immagine in un div, applicare l'arrotondamento e nascondere eventuali trabocchi.

Qui ho anche centrato l'immagine con la flexbox ma non è un requisito.

.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="">