Bootstrap 4 obrázky
Bootstrap 4 obrazové tvary
Zaoblené rohy:
Kruh:
miniatura:
Zaoblené rohy
Třída .roundedpřidá do obrázku zaoblené rohy:
Příklad
<img src="cinqueterre.jpg" class="rounded" alt="Cinque Terre">
Kruh
Třída .rounded-circletvaruje obrázek do kruhu:
Příklad
<img src="cinqueterre.jpg" class="rounded-circle" alt="Cinque Terre">
Náhled
Třída .img-thumbnailtvaruje obrázek do miniatury (s okrajem):
Příklad
<img src="cinqueterre.jpg" class="img-thumbnail" alt="Cinque Terre">
Zarovnání obrázků
Posuňte obrázek doprava pomocí .float-righttřídy nebo doleva pomocí .float-left:
Příklad
<img src="paris.jpg" class="float-left">
<img src="paris.jpg"
class="float-right">
Obrázek na střed
Vycentrujte obrázek přidáním tříd obslužných programů .mx-auto(margin:auto) a .d-block(display:block) do obrázku:
Příklad
<img src="paris.jpg" class="mx-auto d-block">
Responzivní obrázky
Obrázky jsou ve všech velikostech. Stejně tak obrazovky. Responzivní obrázky se automaticky přizpůsobí velikosti obrazovky.
Vytvořte responzivní obrázky přidáním .img-fluidtřídy ke <img>značce. Obrázek se pak pěkně změní na nadřazený prvek.
Třída .img-fluidplatí max-width: 100%;a
height: auto;pro obrázek:
Příklad
<img class="img-fluid" src="img_chania.jpg" alt="Chania">