snímky
Dokumentácia a príklady výberu obrázkov do responzívneho správania (takže sa nikdy nestanú väčšími ako ich nadradené prvky) a pridávajú k nim ľahké š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.
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.
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 .
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.