Source

Slike

Dokumentacija i primjeri za uključivanje slika u responzivno ponašanje (tako da nikad ne postanu veće od svojih nadređenih elemenata) i dodavanje laganih stilova—sve putem klasa.

Responzivne slike

Slike u Bootstrapu su responzivne pomoću .img-fluid. max-width: 100%;i height: auto;primjenjuju se na sliku tako da se skalira s nadređenim elementom.

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

U Internet Exploreru 10, SVG slike .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 slike, pa ga Bootstrap ne primjenjuje automatski.

Sličice slika

Uz naše pomoćne programe radijusa obruba , možete koristiti .img-thumbnailkako biste slici dali izgled zaobljenog obruba od 1 px.

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

Poravnavanje slika

Poravnajte slike s pomoćnim klasama float ili klasama za poravnanje teksta . blockSlike razine mogu se 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 za određivanje više <source>elemenata za određeni <img>, svakako dodajte .img-*klase u <img>a ne u <picture>oznaku.

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