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.

Na tejto stránke

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-thumbnailna 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 . blockObrázky na úrovni je možné vycentrovať pomocou triedy .mx-automargin 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;