Source

Pildid

Dokumentatsioon ja näited piltide valimiseks reageerivaks käitumiseks (nii et need ei muutuks kunagi suuremaks kui nende põhielemendid) ja lisage neile kergeid stiile – seda kõike klasside kaudu.

Reageerivad pildid

Bootstrapis olevad pildid muudetakse tundlikuks rakendusega .img-fluid. max-width: 100%;ja height: auto;rakendatakse pildile nii, et see skaleeruks koos põhielemendiga.

100%x250 
<img src="..." class="img-fluid" alt="Responsive image">
SVG-pildid ja IE 10

Internet Explorer 10-s on SVG-kujutised .img-fluidebaproportsionaalselt suured. Selle parandamiseks lisage width: 100% \9;vajadusel. See parandus muudab teisi pildivorminguid valesti, nii et Bootstrap ei rakenda seda automaatselt.

Piltide pisipildid

Lisaks meie piiriraadiuse utiliitidele saate kasutada .img-thumbnailpildile ümardatud 1 piksli äärise välimust.

200x200 
<img src="..." alt="..." class="img-thumbnail">

Piltide joondamine

Joondage pildid abimeeste ujukiklasside või teksti joondusklassidega . block-tasemel pilte saab tsentreerida, kasutades marginaali .mx-autokasuliku klassi .

200x200 200x200 
<img src="..." class="rounded float-left" alt="...">
<img src="..." class="rounded float-right" alt="...">
200x200 
<img src="..." class="rounded mx-auto d-block" alt="...">
200x200 
<div class="text-center">
  <img src="..." class="rounded" alt="...">
</div>

Pilt

Kui kasutate elementi konkreetse elemendi jaoks <picture>mitme elemendi määramiseks , lisage klassid kindlasti märgendile , mitte märgendile.<source><img>.img-*<img><picture>

<picture>
  <source srcset="..." type="image/svg+xml">
  <img src="..." class="img-fluid img-thumbnail" alt="...">
</picture>