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ą.
<img src="..." class="img-fluid" alt="...">
SVG vaizdai ir Internet Explorer
Internet Explorer 10 ir 11 versijose SVG vaizdai .img-fluid
yra neproporcingai dideli. Norėdami tai išspręsti, pridėkite width: 100%;
arba .w-100
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-thumbnail
norėdami suteikti vaizdui apvalią 1 pikselio kraštinę.
<img src="..." class="img-thumbnail" alt="...">
Vaizdų derinimas
Sulygiuokite vaizdus su pagalbinėmis float klasėmis arba teksto lygiavimo klasėmis . block
lygio vaizdus galima centruoti naudojant paraštės .mx-auto
naudingumo klasę .
<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>
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>