snímky
Dokumentácia a príklady výberu obrázkov do responzívneho správania (takže sa nikdy nestanú širšími ako ich rodič) 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
. To platí max-width: 100%;
pre height: auto;
obrázok tak, že sa zmení na šírku rodiča.
<img src="..." class="img-fluid" alt="...">
Miniatúry obrázkov
Okrem našich nástrojov pre polomer okraja môžete použiť .img-thumbnail
na to, aby obrázok 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-start" alt="...">
<img src="..." class="rounded float-end" 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>
Sass
Premenné
Pre miniatúry obrázkov sú k dispozícii premenné.
$thumbnail-padding: .25rem;
$thumbnail-bg: $body-bg;
$thumbnail-border-width: $border-width;
$thumbnail-border-color: $gray-300;
$thumbnail-border-radius: $border-radius;
$thumbnail-box-shadow: $box-shadow-sm;