Tutorials

Tutorial: How to Fix Image Width

Melden

Bilder, die das Layout sprengen oder verzerrt dargestellt werden, sind ein häufiges Problem im Webdesign. In diesem Tutorial lernst du, wie du die Bildbreite (Image Width) mit verschiedenen Methoden „fixst“ – von HTML/CSS bis hin zu CMS-Systemen wie WordPress.

1. Die goldene Regel: Responsive Bilder (CSS)

In der modernen Webentwicklung möchten wir, dass Bilder nie breiter als ihr Eltern-Container sind. Das verhindert, dass sie auf mobilen Geräten aus dem Bildschirm ragen.

Die Lösung: Füge diesen Code in dein Stylesheet (CSS) ein:

img {
  max-width: 100%;
  height: auto;
  display: block;
}
  • max-width: 100%: Das Bild skaliert herunter, wenn der Bildschirm kleiner wird, aber es wird nie größer als seine Originalquelle.
  • height: auto: Behält das Seitenverhältnis (Aspect Ratio) bei, damit das Bild nicht gestaucht oder gestreckt wird.
  • display: block: Entfernt den kleinen unerwünschten Abstand unterhalb des Bildes.

2. Feste Breite vs. Relative Breite

Manchmal möchtest du eine exakte Breite erzwingen.

A. Feste Breite (Pixel)

Gut für Icons oder Logos, die immer gleich groß bleiben sollen.

.logo {
  width: 250px;
}

B. Relative Breite (Prozent)

Das Bild nimmt immer einen bestimmten Teil des Containers ein.

.hero-image {
  width: 50%; /* Nimmt die Hälfte des verfügbaren Platzes ein */
  height: auto;
}

3. Das "Verzerrungs-Problem" lösen (Object-Fit)

Wenn du eine feste Breite und eine feste Höhe erzwingst, wird das Bild oft hässlich gestreckt. Um das zu verhindern, nutzt man object-fit.

Problem:

img {
  width: 300px;
  height: 200px; /* Bild wird evtl. gequetscht */
}

Lösung:

img {
  width: 300px;
  height: 200px;
  object-fit: cover; /* Schneidet das Bild passend zu, ohne es zu verzerren */
}
  • object-fit: cover: Wirkt wie ein Hintergrundbild (Center-Crop).
  • object-fit: contain: Zeigt das ganze Bild innerhalb der Maße (mit Rändern).

4. Bilder in WordPress fixen

Wenn du kein Programmierer bist, hast du in WordPress zwei Hauptwege:

  1. Block Editor (Gutenberg):
    • Klicke auf das Bild.
    • In der rechten Seitenleiste unter „Einstellungen“ findest du „Bildgröße“.
    • Wähle eine Voreinstellung (Vorschaubild, Mittel, Vollständig) oder gib unter „Abmessungen“ die Breite in Pixel oder Prozent ein.
  2. Customizer (Globaler Fix):
    • Gehe zu Design -> Customizer -> Zusätzliches CSS.
    • Füge dort den Code aus Schritt 1 (max-width: 100%) ein, um alle Bilder deiner Website responsive zu machen.

5. Vorbeugung: Bildgröße vor dem Upload anpassen

Ein häufiger Fehler ist das Hochladen von 5000px breiten Bildern, die dann per CSS auf 500px verkleinert werden. Das verlangsamt die Ladezeit extrem.

  • Tool-Tipp: Nutze kostenlose Tools wie Squoosh.app oder Canva, um die Breite des Bildes bereits vor dem Upload auf das benötigte Maß (z.B. max. 1920px für Full-Width) zu reduzieren.

6. Zusammenfassung der Best Practices

  • Nutze immer max-width: 100%, um Layout-Fehler auf Handys zu vermeiden.
  • Vermeide feste height-Werte, ohne gleichzeitig object-fit: cover zu nutzen.
  • Seitenverhältnis bewahren: Wenn du die Breite änderst, setze die Höhe auf auto.
  • Aspekt-Ratio (Modernes CSS):
    img {
  width: 100%;
  aspect-ratio: 16 / 9;
  object-fit: cover;
}

    (Dies erzwingt ein 16:9 Format, egal wie das Originalbild aussieht.)

Fehlersuche (Quick Fix)

  • Bild ist zu klein? Prüfe, ob das Originalbild genug Pixel hat. CSS kann ein Bild zwar vergrößern, aber es wird dann unscharf (verpixelt).
  • Bild ignoriert die Breite? Prüfe, ob ein übergeordnetes Element (z.B. ein <div> oder eine Tabellenzelle) eine feste Breite hat, die das Bild einschränkt.
0