15. März 2023

Bilder croppen mit CSS

Um ein Bild in´s richtige Format zu croppen, ist heute weder PHP erforderlich, noch muss man es als Hintergrundbild in ein div einbauen. Mit der CSS-Eigenschaft „object-fit“ lassen sich Bilder problemlos auf das passende Format beschneiden, was im responsive Webdesign sehr hilfreich sein kann.

Hier ein Bild im Original-Format:

Und hier gecroppt:

Mit der CSS-Eigenschaft „object-position“ lässt sich die Position festlegen, zu der beschnitten werden soll. Bei diesem Foto würde z.B. „50% 25%“ Sinn ergeben.

Neben dem HTML-Code, der mir bei dieser Lösung deutlich besser gefällt und einfacher zu handlen ist, ist ein weiterer großer Vorteil ggü. Background-Images, dass man bei Bildern ‚loading=“lazy“‚ einsetzen kann.

<style>
.cropped{
 object-fit: cover;
 object-position: 50% 50%;
 height:100px;
 width:100%;
}
</style>

<img src="image.jpg" class="cropped">Code-Sprache: HTML, XML (xml)