snímky
Dokumentácia a príklady na aktiváciu responzívneho správania obrázkov (takže sa nikdy nestanú väčšími ako ich nadradené prvky) a pridať k nim odľahčené štýly – to všetko prostredníctvom tried.
Responzívne obrázky
Obrázky v Bootstrape reagujú pomocou .img-fluid
. max-width: 100%;
a height: auto;
aplikujú sa na obrázok tak, aby sa prispôsobil nadradenému prvku.
<img src="..." class="img-fluid" alt="...">
Obrázky SVG a Internet Explorer
V Internet Exploreri 10 a 11 majú obrázky SVG .img-fluid
neúmernú veľkosť. Ak to chcete opraviť, pridajte width: 100%;
alebo tam, .w-100
kde je to potrebné. Táto oprava má nesprávnu veľkosť iných formátov obrázkov, takže Bootstrap ju nepoužije automaticky.
Miniatúry obrázkov
Okrem našich nástrojov pre polomer okraja môžete použiť .img-thumbnail
na to, aby obraz získal zaoblený vzhľad okraja s veľkosťou 1 pixel.
<img src="..." class="img-thumbnail" alt="...">
Zarovnávanie obrázkov
Zarovnajte obrázky s pomocnými plávajúcimi triedami alebo triedami zarovnania textu . block
Obrázky na úrovni je možné vycentrovať pomocou triedy .mx-auto
margin utility .
<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ázok
Ak používate <picture>
prvok na zadanie viacerých <source>
prvkov pre konkrétny <img>
, nezabudnite pridať .img-*
triedy do značky <img>
a nie do <picture>
značky.
<picture>
<source srcset="..." type="image/svg+xml">
<img src="..." class="img-fluid img-thumbnail" alt="...">
</picture>