Adaptive Bilder oder responsive Bilder sind eine Kombination von Methoden, um je nach Bildschirmgröße oder Gerät die richtigen Bilder zu laden. Adaptive Bilder werden automatisch an die verschiedenen Bildschirmgrößen und Geräte angepasst. Adaptive Bilder erfordern die Erstellung eines anderen Layouts für jedes Gerät, auf dem auf die Webseite zugegriffen wird. Adaptive Bilder können mit CSS Flexbox einfach erstellt werden. Flexbox ist ein eindimensionales CSS-Layoutmodell, das entweder Zeilen oder Spalten erstellt. Flexbox erleichtert die Erstellung einer responsiven Struktur.
Dieser Beitrag bietet Anleitungen zum Erstellen adaptiver Bilder mit CSS Flexbox.
Wie erstelle ich adaptive Bilder mit CSS Flexbox?
Um die adaptiven Bilder mit CSS zu erstellen, müssen Flexbox-Benutzer zunächst die HTML-Struktur erstellen und dann CSS anwenden. Für eine praktische Demonstration gehen Sie die unten aufgeführten Verfahren durch.
Erstellen Sie eine HTML-Struktur
Ein ... kreieren Erstellen Sie zunächst eine Flexbox, indem Sie „ Anzeige „Immobilienwert zu“ biegen ” innerhalb der „ Bildcontainer ” Wenden Sie als Nächstes CSS auf die Bilder an, indem Sie „ Bild ' zusammen mit ' .images-container ' Name. Stellen Sie zunächst „ biegen „Immobilienwert zu“ 1 ” um den verfügbaren freien Speicherplatz gleichmäßig auf die Bilder zu verteilen. Stellen Sie dann „ maximale Breite „Immobilienwert zu“ 100% ”um sicherzustellen, dass Bilder ihre ursprüngliche Breite nicht überschreiten. Stellen Sie „ Höhe „Immobilienwert zu“ Auto ” um das Seitenverhältnis beizubehalten. Fügen Sie schließlich den Abstand zwischen den Bildern hinzu, indem Sie „ Marge „Immobilienwert zu“ 10px ”: Die adaptiven Bilder mit CSS Flexbox wurden erfolgreich erstellt. Die folgende Ausgabeansicht befindet sich vor dem Umbruch des Browserfensters: Lassen Sie uns nun das Browserfenster umbrechen, um zu überprüfen, ob das Bild adaptiv ist oder nicht: Um die adaptiven Bilder mit CSS Flexbox zu erstellen, muss der Benutzer zunächst die HTML-Struktur erstellen und dann diese definieren Etikett. Fügen Sie im
das „ hinzu src ”-Tag, um den Bildpfad anzugeben und das alternative Bild mit dem „ alles ' Etikett:
< div Klasse = „Bilder-Container“ >
< Bild src = „Bild-1.jpg“ alles = „Erstes Bild“ >
< Bild src = „image-2.jpg“ alles = „Zweites Bild“ >
div >
Wenden Sie CSS an
Anzeige: biegen ;
Flex-Wrap: wickeln;
}
.images-container img {
biegen: 1 ;
maximale Breite: 100 % ;
Höhe: automatisch;
Rand: 10px;
}
Vor dem Wrap 
Nach dem Wrap 
Das obige Bild bestätigt, dass die hinzugefügten Bilder adaptiv sind. Abschluss
Etikett. Wenden Sie dann das CSS an und setzen Sie innerhalb des CSS die Eigenschaft „display“ auf „ biegen ” um Flexbox zu erstellen. In diesem Artikel wurde die umfassende Anleitung zum Erstellen adaptiver Bilder mit CSS Flexbox demonstriert.