Vermeiden Sie dehnen Bild (CSS, WordPress)

Question

Ich arbeite derzeit an meiner Wordpress-Website. Ich habe das Thema Optimierer und ich habe ein Childtheme gemacht. Ich habe Änderungen an meinen Block-Widgets vorgenommen, so dass sie rund statt quadratisch sind. Mein Problem ist, dass das Blockbild gestreckt ist.

Also meine Frage ist, wie Sie Ihr Bild in den Kreis passen, ohne das Bild zu strecken? Ich habe versucht, Max-Breite zu verwenden, aber es funktioniert nicht. Gibt es vielleicht einen Code, um das Bild dynamisch zu machen, so dass es sich entsprechend dem Rahmen ändert?

Darunter befindet sich der css-Code für einen der drei Blöcke (sie sind fast identisch).

img.allignnone.wp-image-226 { 
width: 300px; 
height: 300px; 
border: 1px solid #DDDDDD;  
border-radius: 50% 50% 50% 50%; } 

Answer 1

hinzufügen Objekt-fit: Abdeckung;

img.allignnone.wp-image-226 { 
     width: 300px; 
     height: 300px; 
     object-fit: cover; /*HERE*/ 
     border: 1px solid #DDDDDD;  
     border-radius: 50% 50% 50% 50%; 


}