Obrazy Bootstrap 5

Rekomendacje kursów:

Kształt obrazu

Zaokrąglone .rounded

Przykład

Klasa dodaje zaokrąglenia do obrazu:

Spróbuj sam

<img src="flower.jpg" class="rounded" alt="Kwiat">

Okrąg .rounded-circle

Przykład

Klasa tworzy obraz w formie okrągłej:

Spróbuj sam

<img src="flower.jpg" class="rounded-circle" alt="Pięć Wzgórz">

Miniatury .img-thumbnail

Przykład

Klasa tworzy obraz w formie miniaturek (z ramką):

Spróbuj sam

<img src="flower.jpg" class="img-thumbnail" alt="Pięć Wzgórz">

Aby wyprostować obraz .float-start Klasa przesuwa obraz w lewo, lub użyj .float-end Prawo przepływ:

Przykład

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

Spróbuj sam

Centrowanie obrazu

Aby umieścić obraz w środku, dodaliśmy do obrazu klasę utility .mx-auto (margin:auto) oraz .d-block (display:block):

Przykład

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

Spróbuj sam

Responsywne obrazy

Obrazy mają różne rozmiary. Ekran również. Responsywne obrazy automatycznie dostosują się do wymiarów ekranu.

Przez dodanie .img-fluid Klasa dodana do <img> Atrybuty tagu do tworzenia responsywnych obrazów. Następnie obraz będzie dobrze skalował się do wymiarów elementu nadrzędnego.

.img-fluid Klasa zastosowana do obrazów max-width: 100%; i height: auto; :

Przykład

<img class="img-fluid" src="tiyugongyuan.jpg" alt="Nowy Jork">

Spróbuj sam