Source

Vaizdai

Dokumentai ir pavyzdžiai, kaip pasirinkti vaizdams reaguojantį elgesį (kad jie niekada netaptų didesni už pirminius elementus) ir pridėti lengvų stilių – visa tai per klases.

Atsakingi vaizdai

Vaizdai „Bootstrap“ yra pritaikyti naudojant .img-fluid. max-width: 100%;ir height: auto;yra taikomi vaizdui, kad jis atitiktų pirminį elementą.

Placeholder Responsive image 
<img src="..." class="img-fluid" alt="Responsive image">
SVG vaizdai ir IE 10

„Internet Explorer 10“ SVG vaizdai .img-fluidyra neproporcingai dideli. Norėdami tai išspręsti, pridėkite, width: 100% \9;kur reikia. Šis pataisymas netinkamai nustato kitų vaizdo formatų dydį, todėl „Bootstrap“ jo netaiko automatiškai.

Vaizdų miniatiūros

Be mūsų kraštinės spindulio paslaugų , galite naudoti .img-thumbnailnorėdami suteikti vaizdui apvalią 1 pikselio kraštinę.

A generic square placeholder image with a white border around it, making it resemble a photograph taken with an old instant camera 200x200 
<img src="..." alt="..." class="img-thumbnail">

Vaizdų lygiavimas

Sulygiuokite vaizdus su pagalbinėmis float klasėmis arba teksto lygiavimo klasėmis . blocklygio vaizdus galima centruoti naudojant paraštės .mx-autonaudingumo klasę .

Placeholder 200x200 Placeholder 200x200 
<img src="..." class="rounded float-left" alt="...">
<img src="..." class="rounded float-right" alt="...">
Placeholder 200x200 
<img src="..." class="rounded mx-auto d-block" alt="...">
Placeholder 200x200 
<div class="text-center">
  <img src="..." class="rounded" alt="...">
</div>

Paveikslėlis

Jei naudojate <picture>elementą, norėdami nurodyti kelis <source>konkretaus elemento elementus <img>, būtinai pridėkite .img-*klases prie žymos, <img>o ne prie <picture>žymos.

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