Source

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.

Placeholder Responsive image 
<img src="..." class="img-fluid" alt="Responsive image">
Immaġini SVG u IE 10

Fl-Internet Explorer 10, l-immaġini SVG bi .img-fluidhuma ta' daqs sproporzjonat. Biex tirranġa dan, żid width: 100% \9;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-thumbnailbiex tagħti immaġni dehra ta' fruntiera tond ta' 1px.

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">

Allinjament immaġini

Allinja immaġini mal- klassijiet float helper jew klassijiet ta ' allinjament test . blockimmaġini tal-livell jistgħu jiġu ċċentrata bl - użu tal- .mx-autoklassi ta 'utilità tal-marġni .

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>

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>