CSS img – positionieren, zentrieren, beschneiden

Bilder an den Rand, Bilder nebeneinander

Bilder sind inline-Elemente, d.h. sie erzeugen keinen Zeilenumbruch. Bilder werden i.d.R. in HTML-Tags wie div oder figure gesetzt, um sie gezielt auf der Webseite zu positionieren.

Bilder mit flexbox horizontal und vertikal zentrieren

Heute tendiert das Webdesign eher zu zentrierten mittig gesetzten Bildern, statt sie rechts oder links vom Text umfließen zu lassen. display: flex zentriert Bilder einfacher als die klassische Methode aus position, left, top und margin.

.flex { 
    display: flex; 
    justify-content: center; 
    align-items: center;
}

<div class="flex">
    <img src="donut.jpg" width="215" height="183" alt="…">
</div>

Thumbnails à la WordPress: Bild mit object-fit an den Platz anpassen

CSS object-fit passt Bilder an den verfügbaren Platz im Layout an, entweder unter Beibehaltung des Seitenverhältnisses oder durch Aufziehen und Dehnen, um den gesamten verfügbaren Platz mit dem Bild zu füllen. So müssen Bilder nicht mehr im Bildbearbeitungsprogramm auf ein bestimmtes Seitenverhältnis zugeschnitten werden.

Die Medienübersicht von WordPress zeigt Bilder als quadratische Thumbnails. Dahinter steckt einfaches CSS, das die Bilder zentriert und beschneidet. Das HTML-Markup besteht aus einem div-Element mit class="thumbnail" und dem Originalbildern im Hochformat und Querformat.

<div class="thumbnail">
   <img src="DSC00546-1024x682.jpg" width="1024" height="682" alt="…">
</div>
<div class="thumbnail">
   <img class="portrait" src="DSC04525-967x1024.jpg" width="967" height="1024" alt="…">
</div>

Heute für das CSS in den immergrünen Browsern ein leichtes Spiel: object-fit:cover bzw. object-fit:contain setzen den Bildausschnitt angepasst ein.

.thumbnail {
  width: 200px;
  height: 200px;
  overflow: hidden;
}
.thumbnail img {
  height: 200px;
  width: 100%;
  object-fit:cover;
}

.thumbnail img.portrait {
  width: 100%;
  height: auto;
}

aspect-ratio: Seitenverhältnis erhalten

Heute sollte bei <img> immer width und height gesetzt werde, damit der Browser das Seitenverhältnis schon beim Laden kennt und Layout-Sprünge (CLS – Cumulative Layout Shift) verhindert. Wenn bei dynamisch geladenen Bildern die Dimensionen nicht bekannt sind, für responsive Image-Grids (z.B Masonry Layouts), wenn CSS die Größe bestimmt oder das Bild per CSS background geladen wird, wird aspect-ratio eingesetzt, um Layout-Stabilität oder Platzhalterverhalten abzusichern.

.card {
	aspect-ratio: 980/723;
	width: 85%;
	max-width: 560px;
	background: url("paisley.jpg");
	margin: auto;
}

Bild dynamisch mit JavaScript laden:

const btn = document.querySelector("#loadimg");
const replace = document.querySelector(".replace");

btn.addEventListener("click", async () => {
	const img = new Image();
	img.src = "img/rhein.jpg";
	img.alt = "Bild mit JavaScript laden";

	await img.decode();
	replace.append(img);
});

Bilder als background-image zentrieren

Bilder können nicht nur über das img-Tag eingebunden werden, sondern auch via CSS background-image. Dann bietet background-position die einfachste Technik, das Bild innerhalb seines umfassenden Blocks zu zentrieren.

<div class="center-frame">
  <div class="wild-frame"></div>
</div>

.center-frame { 
  width: 300px;
  height: 200px;
  overflow: hidden
}
.wild-frame {
  background: url(city-490.webp) no-repeat center; 
  width:100%;
  height: 100%
}

Bilder maskieren und freistellen

Dank des WebP-Formats können wir freigestellte Bilder ohne Hintergrund in höher Qualität in die Webseite setzen. Wir können Masken aber auch ähnlich wie in Bildbearbeitungsprogrammen mit Pfaden oder weichen Alpha-Masken auf der Webseite ohne Hintergrund anzeigen, und das Bild dabei intakt lassen – nicht-destruktiv.

CSS mask-image läßt sich animieren:

.pattern {
	mask-image: url("mask-image-circle.svg");
	mask-size: 50%;
	mask-repeat: no-repeat;
	animation: position 10s infinite linear;
}

Bilder mit SVG clipPath beschneiden

Eine letzte Alternative ist der SVG clipPath, der im Illustrationsprogramm unter Sichtkontrolle vorgefertigt werden kann.

<svg version="1.1" viewBox="0 0 360 360" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
   <clipPath id="cp">
      <rect x="180" y="0" width="360" height="360"/>
   </clipPath>
   <image transform="translate(-180)" width="720" height="347" clip-path="url(#cp)" xlink:href="tartuffo.jpg"/>
</svg>

Mehr zu SVG clipPath – Bilder und Grafik beschneiden und freistellen

img responsive – vertikal / horizontal anpassen

Fast immer sorgt width:100% zusammen mit height:auto dafür, dass sich Bilder an die Maße ihres Containers anpassen, ohne dabei das Seitenverhältnis anzutasten. Bilder im Landschafts-Format (breiter als hoch) bereiten keine Probleme, aber für Bilder im Hochformat funktioniert die Allround-Formel nicht.

.quad {
  display: flex; 
  justify-content: center; 
  align-items:center; 
}
.quad img {
  max-height: 100%;
  max-width: 100%;
  width:auto;
  height:auto;
}