Source

Slike

Dokumentacija i primjeri za prilagođavanje slika u odzivnom ponašanju (tako da nikada ne postanu veće od svojih nadređenih elemenata) i dodaju im lagane stilove – sve putem klasa.

Responsive images

Slike u Bootstrapu su prilagođene sa .img-fluid. max-width: 100%;i height: auto;primjenjuju se na sliku tako da se mjeri s roditeljskim elementom.

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

U Internet Explorer-u 10, SVG slike sa .img-fluidsu neproporcionalne veličine. Da biste to popravili, dodajte width: 100% \9;gdje je potrebno. Ovaj popravak neispravno određuje veličinu drugih formata slika, tako da ga Bootstrap ne primjenjuje automatski.

Sličice slika

Kao dodatak našim uslužnim programima radijusa granice , možete koristiti .img-thumbnailda slici date zaobljen izgled granice od 1px.

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

Poravnavanje slika

Poravnajte slike sa pomoćnim plutajućim klasama ili klasama poravnanja teksta . block-nivo slike se mogu centrirati pomoću klase .mx-autokorisnosti margine .

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>

Slika

Ako koristite <picture>element da navedete više <source>elemenata za određeni <img>, obavezno dodajte .img-*klase u oznaku <img>, a ne u <picture>oznaku.

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