snímky
Dokumentace a příklady pro aktivaci responzivního chování obrázků (takže nikdy nebudou větší než jejich rodičovské prvky) a přidání odlehčených stylů – vše prostřednictvím tříd.
Responzivní obrázky
Obrázky v Bootstrapu reagují pomocí .img-fluid
. max-width: 100%;
a height: auto;
jsou aplikovány na obrázek tak, aby se změnil s rodičovským prvkem.
<img src="..." class="img-fluid" alt="...">
Obrázky SVG a Internet Explorer
V Internet Exploreru 10 a 11 mají obrázky SVG .img-fluid
neúměrnou velikost. Chcete-li to opravit, přidejte width: 100%;
nebo .w-100
podle potřeby. Tato oprava má nesprávnou velikost jiných obrazových formátů, takže ji Bootstrap nepoužije automaticky.
Miniatury obrázků
Kromě našich obslužných programů pro poloměr okrajů můžete použít .img-thumbnail
k tomu, aby obrázek získal vzhled zaobleného okraje o velikosti 1 pixel.
<img src="..." class="img-thumbnail" alt="...">
Zarovnání obrázků
Zarovnejte obrázky s pomocnými třídami float nebo třídami zarovnání textu . block
-level obrázky lze vycentrovat pomocí třídy .mx-auto
margin utility class .
<img src="..." class="rounded float-left" alt="...">
<img src="..." class="rounded float-right" alt="...">
<img src="..." class="rounded mx-auto d-block" alt="...">
<div class="text-center">
<img src="..." class="rounded" alt="...">
</div>
Obrázek
Pokud prvek používáte <picture>
k určení více <source>
prvků pro konkrétní <img>
, nezapomeňte přidat .img-*
třídy do značky <img>
a nikoli do <picture>
značky.
<picture>
<source srcset="..." type="image/svg+xml">
<img src="..." class="img-fluid img-thumbnail" alt="...">
</picture>