So legen Sie die Bildform in Bootstrap4 fest

Bild mit abgerundeten Ecken

. Mit der abgerundeten Klasse kann das Bild den Effekt abgerundeter Ecken anzeigen:

Beispiel

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

Ellipsenbild

.Die Rounded-Circle-Klasse kann ein elliptisches Bild festlegen :

Beispiel

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

Verwandte Empfehlungen: „Bootstrap Getting Started Tutorial“

Miniaturansicht

.img-thumbnail-Klasse wird zum Festlegen von Miniaturansichten von Bildern verwendet (Bilder haben Ränder):

Instanz

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

Bildausrichtung

Verwenden Sie die Klasse .float-right, um die rechte Ausrichtung des Bildes festzulegen, und verwenden Sie zum Festlegen die Klasse .float-left die linke Ausrichtung des Bildes:

Beispiele

<img  src="paris.jpg" class="float-left" alt="So legen Sie die Bildform in Bootstrap4 fest" > <img  src="cinqueterre.jpg" class="float-right" alt="So legen Sie die Bildform in Bootstrap4 fest" >

Responsive Bilder

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

Wir können responsive Bilder einrichten, indem wir die .img-fluid-Klasse im -Tag hinzufügen.

.img-fluid 类设置了 max-width: 100%; 、 height: auto; :

Instanz

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

Das obige ist der detaillierte Inhalt vonSo legen Sie die Bildform in Bootstrap4 fest. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!