Zum Hauptinhalt springen Zur Dokumentennavigation springen
Check
in English

Bilder

Dokumentation und Beispiele für das Optimieren von Bildern für reaktionsfähiges Verhalten (damit sie nie breiter als ihre Eltern werden) und das Hinzufügen einfacher Stile zu ihnen – alles über Klassen.

Ansprechende Bilder

Bilder in Bootstrap werden mit responsive gemacht .img-fluid. Dies gilt für max-width: 100%;das height: auto;Bild, sodass es mit der übergeordneten Breite skaliert wird.

Placeholder Responsive image
html
<img src="..." class="img-fluid" alt="...">

Bild-Thumbnails

Zusätzlich zu unseren Dienstprogrammen für den Randradius können Sie verwenden .img-thumbnail, um einem Bild ein abgerundetes 1-Pixel-Randaussehen zu verleihen.

A generic square placeholder image with a white border around it, making it resemble a photograph taken with an old instant camera 200x200
html
<img src="..." class="img-thumbnail" alt="...">

Bilder ausrichten

Richten Sie Bilder mit den Helfer-Float-Klassen oder Textausrichtungsklassen aus . block-Level-Bilder können mit der .mx-autoMargin-Utility-Klasse zentriert werden .

Placeholder 200x200 Placeholder 200x200
html
<img src="..." class="rounded float-start" alt="...">
<img src="..." class="rounded float-end" alt="...">
Placeholder 200x200
html
<img src="..." class="rounded mx-auto d-block" alt="...">
Placeholder 200x200
html
<div class="text-center">
  <img src="..." class="rounded" alt="...">
</div>

Bild

Wenn Sie das Element verwenden, um mehrere Elemente für ein bestimmtes <picture>anzugeben , achten Sie darauf, die Klassen zum und nicht zum Tag hinzuzufügen .<source><img>.img-*<img><picture>

<picture>
  <source srcset="..." type="image/svg+xml">
  <img src="..." class="img-fluid img-thumbnail" alt="...">
</picture>

Sass

Variablen

Variablen sind für Bild-Thumbnails verfügbar.

$thumbnail-padding:                 .25rem;
$thumbnail-bg:                      $body-bg;
$thumbnail-border-width:            $border-width;
$thumbnail-border-color:            var(--#{$prefix}border-color);
$thumbnail-border-radius:           $border-radius;
$thumbnail-box-shadow:              $box-shadow-sm;