in English

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.

Placeholder Responsive image 
<img src="..." class="img-fluid" alt="...">
SVG-bildoj kaj Internet Explorer

En Internet Explorer 10 kaj 11, SVG-bildoj kun .img-fluidestas misproporcie grandaj. Por ripari ĉi tion, aldonu width: 100%;aŭ .w-100kie 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.

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="..." class="img-thumbnail" alt="...">

Vicigante bildojn

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

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>

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>