BEARS
Keine Ergebnisse
Img-Komponenten-Test

Img-Komponenten-Test

Img-Komponente - Verschiedene Breitenwerte

Dieser Abschnitt testet die responsive Bildgenerierung der Img-Komponente. Jedes Bild unten verwendet die gleiche Quelle, aber unterschiedliche width-Props. Klicke auf ein beliebiges Bild, um es in einem Modal zu vergrößern.

Kleine Breite (400px)

Test bei 400px Breite

Mittlere Breite (800px)

Test bei 800px Breite

Prozentuale Breite (50%)

Test bei 50% Breite

Standard (keine Breite angegeben)

Test mit voller Standardbreite

Marquee-Test

Dieses Marquee demonstriert Img in einem kontinuierlich scrollenden Carousel. Das erste Bild hat Klick-zum-Vergrößern aktiviert, während die anderen es für eine reibungslose Scroll-Interaktion deaktivieren.

Marquee-Bild 1
Marquee-Bild 2 Marquee-Bild 3 Marquee-Bild 4 Marquee-Bild 5 Marquee-Bild 6

Dieses Carousel zeigt Img in einem Slideshow-Format mit nativer Seitenverhältnis-Beibehaltung. Jede Folie hat Klick-zum-Vergrößern aktiviert.

Carousel-Folie 1
Carousel-Folie 2
Carousel-Folie 3
Carousel-Folie 4
Carousel-Folie 5
Carousel-Folie 6

So verifizierst du die Features

Srcset-Verifizierung

  1. Öffne die Browser-DevTools (F12)
  2. Gehe zum Network-Tab
  3. Lade die Seite neu
  4. Filtere nach Bildanfragen
  5. Klicke auf ein beliebiges Bild, um zu sehen, welche srcset-Variante je nach Viewport-Größe geladen wurde
  6. Astro generiert automatisch passende Breiten basierend auf dem sizes-Attribut

Responsive-Bild-Test

  1. Ändere die Größe deines Browserfensters
  2. Jedes Bild sollte sich an seine angegebene Breite anpassen (400px, 800px, 50% usw.)
  3. Netzwerkanfragen sollten sich bei Viewport-Änderungen anpassen
  4. Bilder sollten passende Größen für den Viewport laden

Klick-zum-Vergrößern-Verifizierung

  1. Klicke auf ein beliebiges Bild in den Abschnitten “Verschiedene Breitenwerte” oder “Carousel”
  2. Ein Modal öffnet sich mit dem Bild in voller WebP-Auflösung
  3. Schließen über den Schließen-Button ODER Klick auf den Hintergrund
  4. Escape-Taste zum Schließen des Modals drücken
  5. Das Modal wird von der ImageModal.astro-Komponente gerendert

Marquee-Verifizierung

  1. Das Marquee sollte automatisch und gleichmäßig scrollen
  2. Hover zum Pausieren der Animation
  3. Klick-zum-Vergrößern ist bei den meisten Carousel-Elementen für reibungsloses Scrollen deaktiviert
  4. Das erste Bild hat Klick-zum-Vergrößern aktiviert

Technische Details

Img-Komponente:

  • Erforderliche Props: src und alt (TypeScript-erzwungen)
  • Width-Prop: Akzeptiert CSS-Breitenwerte (“50%”, “800px” usw.)
  • Automatisch abgeleitete Sizes: Das Sizes-Attribut wird aus dem Width-Prop berechnet
  • Responsive Bilder: Die Astro-Image-Komponente übernimmt die srcset-Generierung automatisch
  • Modal: Bild in voller Auflösung über ImageModal-Komponente, schließbar über Button, Hintergrund-Klick oder Escape-Taste

ImageModal-Komponente:

  • Extrahierte Modal-Komponente für die Klick-zum-Vergrößern-Funktionalität
  • Verwendet Alpine.js für die Modal-Zustandsverwaltung
  • Zeigt das vollständige WebP-Bild in einem responsiven Modal an

Beispiele für automatische Ableitung:

  • width="50%" → sizes="50vw"
  • width="800px" → sizes="800px"
  • Nutzer können sizes für fortgeschrittene responsive Szenarien überschreiben