Schließen Sie ein rechteckiges Bild in einem gepolsterten Kreis ein

Question

Ich habe Bilder, die rechteckig sind, in unterschiedlichen Proportionen und Bildgrößen. Ich möchte sie in einem Kreis von 100x100px einschließen.

Der leere Bereich innerhalb des Kreises über und unter dem Bild mit einer Hintergrundfarbe aufgefüllt.

Bisher habe ich das - es ist fast da, aber die Flagge ist nicht horizontal zentriert und die abgerundeten Ecken sollten die Flagge klemmen.

<div id="enclosure"> 
     <div id="image-container"> 
     <img src="http://aiatsis.gov.au/sites/default/files/images/galleries/aboriginal_flag/aboriginal_flag.jpg"/> 
     </div> 
    </div> 

#enclosure { 
    display: inline-block; 
    width: 100px; 
    background-color: white; 
} 

#image-container { 
    height: 0; 
    padding-bottom: 100%; 
    background-color: silver; 
    border-radius: 50%; 
} 

https://jsfiddle.net/sean123456789/jpcnony4/

Answer 1

Ihre border-radius arbeitet an Container Bild, aber nicht auf das Bild, so dass Sie overflow:hidden in Bild Behälter verwenden müssen, die den Teil des Bildes goinf aus dem div verstecken

#image-container { 
    height: 0; 
    padding-bottom: 100%; 
    background-color: silver; 
    border-radius: 50%; 
    width: 100px; 
    overflow:hidden 
} 
#image-container img { 
    position:absolute; 
    top:50%; 
    left:50%; 
    transform:translate(-50%,-50%); 
} 

Arbeitsgeige: https://jsfiddle.net/jpcnony4/4/