Bootstrap 4 Bilder
Bootstrap 4 Bildformen
Abgerundete Ecken:
Kreis:
Miniaturansicht:
Abgerundete Ecken
Die .roundedKlasse fügt einem Bild abgerundete Ecken hinzu:
Beispiel
<img src="cinqueterre.jpg" class="rounded" alt="Cinque Terre">
Kreis
Die .rounded-circleKlasse formt das Bild zu einem Kreis:
Beispiel
<img src="cinqueterre.jpg" class="rounded-circle" alt="Cinque Terre">
Miniaturansicht
Die .img-thumbnailKlasse formt das Bild zu einem Thumbnail (umrandet):
Beispiel
<img src="cinqueterre.jpg" class="img-thumbnail" alt="Cinque Terre">
Bilder ausrichten
Bewegen Sie ein Bild nach rechts mit der .float-rightKlasse oder nach links mit .float-left:
Beispiel
<img src="paris.jpg" class="float-left">
<img src="paris.jpg"
class="float-right">
Zentriertes Bild
Zentrieren Sie ein Bild, indem Sie die Hilfsklassen .mx-auto(margin:auto) und .d-block(display:block) zum Bild hinzufügen:
Beispiel
<img src="paris.jpg" class="mx-auto d-block">
Responsive Bilder
Bilder gibt es in allen Größen. Bildschirme auch. Responsive Bilder passen sich automatisch an die Größe des Bildschirms an.
Erstellen Sie ansprechende Bilder, indem Sie .img-fluiddem <img>Tag eine Klasse hinzufügen. Das Bild wird dann gut auf das übergeordnete Element skaliert.
Die .img-fluidKlasse gilt max-width: 100%;und
height: auto;für das Bild:
Beispiel
<img class="img-fluid" src="img_chania.jpg" alt="Chania">