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.
<img src="..." class="img-fluid" alt="...">
Slike SVG in Internet Explorer
V Internet Explorerju 10 in 11 so slike SVG .img-fluid
nesorazmerne velikosti. Če želite to popraviti, dodajte width: 100%;
ali , .w-100
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.
<img src="..." class="img-thumbnail" alt="...">
Poravnava slik
Poravnajte slike s pomožnimi lebdečimi razredi ali razredi za poravnavo besedila . block
Slike na nivoju se lahko centrirajo z uporabo razreda .mx-auto
uporabnosti 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
Č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>