Bootstrap 4 obrazy
Bootstrap 4 kształty obrazu
Zaokrąglone rogi:
Koło:
Miniaturka:
Zaokrąglone rogi
Klasa .roundeddodaje zaokrąglone rogi do obrazu:
Przykład
<img src="cinqueterre.jpg" class="rounded" alt="Cinque Terre">
Koło
Klasa .rounded-circlekształtuje obraz w okrąg:
Przykład
<img src="cinqueterre.jpg" class="rounded-circle" alt="Cinque Terre">
Miniaturka
Klasa .img-thumbnailkształtuje obraz w miniaturę (z obramowaniem):
Przykład
<img src="cinqueterre.jpg" class="img-thumbnail" alt="Cinque Terre">
Wyrównywanie obrazów
Przesuń obrazek w prawo z .float-rightklasą lub w lewo, używając .float-left:
Przykład
<img src="paris.jpg" class="float-left">
<img src="paris.jpg"
class="float-right">
Wyśrodkowany obraz
Wyśrodkuj obraz, dodając do niego klasy narzędziowe .mx-auto(margin:auto) i .d-block(display:block):
Przykład
<img src="paris.jpg" class="mx-auto d-block">
Responsywne obrazy
Obrazy są we wszystkich rozmiarach. Podobnie ekrany. Elastyczne obrazy automatycznie dopasowują się do rozmiaru ekranu.
Twórz responsywne obrazy, dodając .img-fluidklasę do <img>tagu. Obraz będzie wtedy ładnie skalowany do elementu nadrzędnego.
Klasa .img-fluiddotyczy max-width: 100%;i
height: auto;do obrazu:
Przykład
<img class="img-fluid" src="img_chania.jpg" alt="Chania">