Source

Bildoj

Dokumentado kaj ekzemploj por elekti bildojn en respondema konduto (do ili neniam fariĝas pli grandaj ol siaj gepatraj elementoj) kaj aldonu malpezajn stilojn al ili — ĉio per klasoj.

Respondema bildoj

Bildoj en Bootstrap fariĝas respondemaj kun .img-fluid. max-width: 100%;kaj height: auto;estas aplikataj al la bildo tiel ke ĝi skalas kun la gepatra elemento.

100% x 250 
<img src="..." class="img-fluid" alt="Responsive image">
SVG-bildoj kaj IE 10

En Internet Explorer 10, SVG-bildoj kun .img-fluidestas misproporcie grandaj. Por ripari ĉi tion, aldonu width: 100% \9;kie necese. Ĉi tiu riparo nedece grandigas aliajn bildformatojn, do Bootstrap ne aplikas ĝin aŭtomate.

Bildetoj

Aldone al niaj limradiaj utilecoj , vi povas uzi .img-thumbnailpor doni al bildo rondigitan 1px randan aspekton.

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

Vicigante bildojn

Vicigu bildojn kun la helpaj flosklasoj aŭ tekst-aligklasoj . block-nivelaj bildoj povas esti centritaj per la .mx-automarĝena utileca klaso .

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

Bildon

Se vi uzas la <picture>elementon por specifi plurajn <source>elementojn por specifa <img>, certigu aldoni la .img-*klasojn al la <img>kaj ne al la <picture>etikedo.

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