Слики
Документација и примери за вклучување на сликите во одзивно однесување (за тие никогаш да не станат поголеми од нивните родителски елементи) и да додадете лесни стилови на нив - сето тоа преку класи.
Одговорни слики
Сликите во Bootstrap се прават одговорни со .img-fluid
. max-width: 100%;
и height: auto;
се применуваат на сликата така што таа се скалира со матичниот елемент.
<img src="..." class="img-fluid" alt="...">
SVG слики и Internet Explorer
Во Internet Explorer 10 и 11, SVG сликите со .img-fluid
се со непропорционална големина. За да го поправите ова, додајте width: 100%;
или .w-100
каде што е потребно. Оваа поправка неправилно ги димензионира другите формати на слики, така што Bootstrap не го применува автоматски.
Сликички на слики
Во прилог на нашите алатки со граничен радиус , можете да ги користите .img-thumbnail
за да и дадете на сликата заоблен изглед на границата од 1 px.
<img src="..." class="img-thumbnail" alt="...">
Порамнување на слики
Порамнете ги сликите со помошните float класи или класите за порамнување текст . block
Сликите на ниво може да се центрираат со помош на .mx-auto
класата за помошна маргина .
<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>
Слика
Ако го користите <picture>
елементот за да наведете повеќе <source>
елементи за одредена <img>
, погрижете се да ги додадете .img-*
класите во, <img>
а не во <picture>
ознаката.
<picture>
<source srcset="..." type="image/svg+xml">
<img src="..." class="img-fluid img-thumbnail" alt="...">
</picture>