Source

Slike

Dokumentacija in primeri za izbiro odzivnega vedenja slik (tako da nikoli ne postanejo večje od svojih nadrejenih elementov) in jim dodajanje lahkih slogov – vse prek razredov.

Odzivne slike

Slike v Bootstrapu so narejene odzivne z .img-fluid. max-width: 100%;in height: auto;se uporabijo za sliko, tako da se meri z nadrejenim elementom.

100 % x 250 
<img src="..." class="img-fluid" alt="Responsive image">
Slike SVG in IE 10

V Internet Explorerju 10 so slike SVG .img-fluidnesorazmerne velikosti. Če želite to popraviti, dodajte, width: 100% \9;kjer je potrebno. Ta popravek neustrezno določa velikost drugih formatov slik, zato ga Bootstrap ne uporabi samodejno.

Sličice slik

Poleg naših pripomočkov za polmer obrobe lahko uporabite, .img-thumbnailče želite sliki dati zaokrožen videz obrobe 1 slikovne pike.

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

Poravnava slik

Poravnajte slike s pomožnimi lebdečimi razredi ali razredi za poravnavo besedila . blockSlike na nivoju se lahko centrirajo z uporabo razreda .mx-autouporabnosti 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

Če uporabljate <picture>element za določanje več <source>elementov za določeno <img>, se prepričajte, da dodate .img-*razrede v <img>in ne v <picture>oznako.

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