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-fluidneúmernú veľkosť. Ak to chcete opraviť, pridajte width: 100%;alebo tam, .w-100kde 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-thumbnailna 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 . blockObrázky na úrovni je možné vycentrovať pomocou triedy .mx-automargin 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>