Bootstrap5-Bildformen

Bootstrap 5 bietet viele Klassen, mit denen Sie das Aussehen von Bildern schnell anpassen und optimieren können, insbesondere die Steuerung von Form, Größe und responsivem Layout von Bildern.

Abgerundetes Bild

.roundedDie Klasse kann Bilder mit abgerundeten Eckeneffekten darstellen:

Beispiel

<img src="cinqueterre.jpg" class="rounded" alt="Cinque Terre">

Selbst ausprobieren »

Ovales Bild

.rounded-circleDie Klasse kann ovale Bilder erstellen:

Beispiel

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

Selbst ausprobieren »

Miniaturbild

.img-thumbnailDie Klasse wird verwendet, um Bild-Miniaturansichten festzulegen (Bilder haben Rahmen):

Beispiel

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

Selbst ausprobieren »

Bildausrichtung

Verwenden Sie.float-startKlasse, um Bilder links auszurichten, verwenden Sie.float-endKlasse, um Bilder rechts auszurichten:

Beispiel

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

Selbst ausprobieren »

Zentriertes Bild

Verwenden Sie.mx-auto (margin:auto)und .d-block (display:block)Klassen, um Bilder zu zentrieren:

Beispiel

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

Selbst ausprobieren »

Responsives Bild

Bilder gibt es in verschiedenen Größen, und wir müssen sie automatisch an die Bildschirmgröße anpassen.

Wir können die<img>Klasse zum.img-fluidTag hinzufügen, um responsive Bilder festzulegen.

.img-fluidDie Klasse setztmax-width: 100%; 、 height: auto; :

Beispiel

<img class="img-fluid" src="img_chania.jpg" alt="Chania">

Selbst ausprobieren »
Andere Erweiterungen