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.
<img src="..." class="img-fluid" alt="...">
SVG slike i Internet Explorer
U Internet Exploreru 10 i 11, SVG slike .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 slike, pa ga Bootstrap ne primjenjuje automatski.
Sličice slika
Uz naše pomoćne programe radijusa obruba , možete koristiti .img-thumbnail
kako biste slici dali izgled zaobljenog obruba od 1 px.
<img src="..." class="img-thumbnail" alt="...">
Poravnavanje slika
Poravnajte slike s pomoćnim klasama float ili klasama za poravnanje teksta . block
Slike razine mogu se centrirati pomoću klase .mx-auto
korisnosti margine .
<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 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>