Bootstrap4 Bildformen

Abgerundetes Bild

.roundedDie Klasse kann Bilder mit abgerundeten Eckeneffekten darstellen:

Beispiel

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

Selbst ausprobieren »

Elliptisches Bild

.rounded-circleDie Klasse kann elliptische Bilder festlegen:

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 die.float-rightKlasse, um Bilder rechtsbündig auszurichten, verwenden Sie die.float-leftKlasse, um Bilder linksbündig auszurichten:

Beispiel

<img src="paris.jpg" class="float-left"> <img src="cinqueterre.jpg" class="float-right">

Selbst ausprobieren »

Zentriertes Bild

Verwenden Sie.mx-auto (margin:auto)und .d-block (display:block)Klasse, um die zentrierte Bildausrichtung festzulegen:

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 dies tun, indem wir<img>-Tag hinzufügen und.img-fluid-Klasse 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