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-fluidgħandhom daqs sproporzjonat. Biex tirranġa dan, żid width: 100%;jew .w-100fejn 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.

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

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 .

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