Bootstrap 5-Bild

Kursempfehlungen:

Bildform

Kantenrunden .rounded

Beispiel

Die Klasse fügt dem Bild Kantenrunden hinzu:

Versuchen Sie es selbst

<img src="flower.jpg" class="rounded" alt="Blume">

Kreis .rounded-circle

Beispiel

Die Klasse formt das Bild in einen Kreis:

Versuchen Sie es selbst

<img src="flower.jpg" class="rounded-circle" alt="Cinque Terre">

Miniatur .img-thumbnail

Beispiel

Die Klasse formt das Bild in eine Miniatur (mit Rahmen):

Versuchen Sie es selbst

<img src="flower.jpg" class="img-thumbnail" alt="Cinque Terre">

Um das Bild auszurichten .float-start Die Klasse bewegt das Bild nach links, oder verwenden Sie .float-end Rechts fließend:

Beispiel

<img src="tulip.jpg" class="float-start">
<img src="tulip.jpg" class="float-end">

Versuchen Sie es selbst

Zentriertes Bild

Um das Bild zentral auszurichten, haben wir Utility-Klassen dem Bild hinzugefügt .mx-auto (Abstand: auto) und .d-block (Anzeige: block):

Beispiel

<img src="tulip.jpg" class="mx-auto d-block">

Versuchen Sie es selbst

Responsives Bild

Bilder gibt es in verschiedenen Größen. Das Bildschirm ist ebenfalls so. Responsiv angepasste Bilder passen sich automatisch an die Bildschirmgröße an.

Durch Hinzufügen .img-fluid Klasse hinzufügen <img> Mit dem Tag <img> und der Klasse .img-fluid werden responsive Bilder erstellt. Dann passen sich die Bilder gut an den Eltern-Elementen an.

.img-fluid Klasse für Bildanwendungen max-width: 100%; und height: auto; :

Beispiel

<img class="img-fluid" src="tiyugongyuan.jpg" alt="New York">

Versuchen Sie es selbst