wie man quadratische beschnittene Bilder anspricht

Question

Ich versuche, eine Reihe von Bildern mit leicht variierenden Größen zu Quadraten mit passenden Größen zu beschneiden und sie reaktionsfähig zu machen. Ich fand heraus, dass es möglich ist, meine Bilder zu beschneiden, indem ich sie in divs platziere und dann das Bild zu einem Hintergrundbild mache, aber wenn ich height: auto benutze, um responsive Bilder zu erhalten, kollabiert das div.

Dies ist das nächste, was ich für mein Problem finden: How to make centre cropped image responsive?

aber diese Lösung nur eine quadratische Ernte erhalten, wenn das Bild in einem Hochformat zu beginnen. Außerdem müsste ich jedes Bild nach Größe zuschneiden.

Ich denke, was ich suche, ist ein CSS-Hack, der alle meine Bilder auf das Quadrat der gleichen Größe zuschneiden und dann entsprechend skalieren könnte. Ist das Wunschdenken für CSS?

Answer 1

Haben Sie versucht, die Hintergrundgröße: Abdeckung? es passt das Hintergrundbild an die Größe des Containers an.

background-position: center bottom; 
    background-repeat: no-repeat; 
    background-size: cover; 
    background-position: center center;