Imazhet

Dokumentacion dhe shembuj për zgjedhjen e imazheve në sjellje reaguese (kështu që ato të mos bëhen kurrë më të gjera se prindi i tyre) dhe t'u shtoni stile të lehta - të gjitha përmes klasave.

Në këtë faqe

Imazhe të përgjegjshme

Imazhet në Bootstrap bëhen të përgjegjshme me .img-fluid. Kjo vlen max-width: 100%;dhe height: auto;për imazhin në mënyrë që të shkallëzohet me gjerësinë e prindit.

html

<img src="..." class="img-fluid" alt="...">

Miniaturat e imazhit

Përveç shërbimeve tona të rrezes kufitare , mund t'i përdorni .img-thumbnailpër t'i dhënë një imazhi një pamje të rrumbullakosur të kufirit 1 px.

html

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

Përafrimi i imazheve

Përafroni imazhet me klasat float ndihmëse ose klasat e shtrirjes së tekstit . blockImazhet e nivelit mund të përqendrohen duke përdorur klasën e përdorimit të .mx-automarzhit .

html

<img src="..." class="rounded float-start" alt="...">
<img src="..." class="rounded float-end" alt="...">

html

<img src="..." class="rounded mx-auto d-block" alt="...">

html

<div class="text-center">
  <img src="..." class="rounded" alt="...">
</div>

Foto

Nëse po përdorni <picture>elementin për të specifikuar elementë të shumtë <source>për një specifik <img>, sigurohuni që t'i shtoni .img-*klasat në etiketë <img>dhe jo në <picture>etiketë.

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

Sass

Variablat

Variablat janë të disponueshëm për miniaturat e imazheve.

$thumbnail-padding:                 .25rem;
$thumbnail-bg:                      $body-bg;
$thumbnail-border-width:            $border-width;
$thumbnail-border-color:            var(--#{$prefix}border-color);
$thumbnail-border-radius:           $border-radius;
$thumbnail-box-shadow:              $box-shadow-sm;