Stampi
Dokumentazzjoni u eżempji għall-għażla ta 'immaġini f'imġieba reattiva (għalhekk qatt ma jsiru akbar mill-elementi ġenituri tagħhom) u żid stili ħfief magħhom—kollha permezz ta' klassijiet.
Immaġini li jirrispondu
L-immaġini f'Bootstrap isiru responsivi b' .img-fluid
. max-width: 100%;
u height: auto;
huma applikati għall-immaġni sabiex tiskala mal-element ġenitur.
<img src="..." class="img-fluid" alt="...">
Immaġini SVG u Internet Explorer
Fl-Internet Explorer 10 u 11, l-immaġini SVG .img-fluid
għandhom daqs sproporzjonat. Biex tirranġa dan, żid width: 100%;
jew .w-100
fejn meħtieġ. Din it-tiswija tqies b'mod mhux xieraq formati oħra ta' immaġini, għalhekk Bootstrap ma japplikahiex awtomatikament.
Miniaturi tal-immaġni
Minbarra l -utilitajiet tar-raġġ tal-fruntiera tagħna , tista 'tuża .img-thumbnail
biex tagħti immaġni dehra ta' fruntiera tond ta' 1px.
<img src="..." class="img-thumbnail" alt="...">
Allinjament immaġini
Allinja immaġini mal- klassijiet float helper jew klassijiet ta ' allinjament test . block
immaġini tal-livell jistgħu jiġu ċċentrata bl - użu tal- .mx-auto
klassi ta 'utilità tal-marġni .
<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>
Stampa
Jekk qed tuża l- <picture>
element biex tispeċifika <source>
elementi multipli għal <img>
, kun żgur li żżid il- .img-*
klassijiet mat -tikketta <img>
u mhux mat- <picture>
tikketta.
<picture>
<source srcset="..." type="image/svg+xml">
<img src="..." class="img-fluid img-thumbnail" alt="...">
</picture>