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.
<img src="..." class="img-fluid" alt="...">
SVG slike i Internet Explorer
U Internet Explorer-u 10 i 11, SVG slike sa .img-fluid
su neproporcionalne veličine. Da biste to popravili, dodajte width: 100%;
ili .w-100
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-thumbnail
da slici date zaobljen izgled granice od 1px.
<img src="..." class="img-thumbnail" alt="...">
Poravnavanje slika
Poravnajte slike sa pomoćnim plutajućim klasama ili klasama poravnanja teksta . block
-nivo slike se mogu centrirati pomoću margine .mx-auto
korisnosti klase .
<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>
Slika
Ako koristite <picture>
element da navedete više <source>
elemenata za određeni <img>
, pobrinite se da dodate .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>