Irudiak

Irudiak jokabide onean aukeratzeko dokumentazioa eta adibideak (beraz, ez dira inoiz haien elementu nagusiak baino handiagoak izan) eta estilo arinak gehitzeko, hori guztia klaseen bidez.

Irudi sentikorrak

Bootstrap-eko irudiak responsive-rekin egiten dira .img-fluid. max-width: 100%;eta height: auto;irudiari aplikatzen zaizkio, elementu nagusiarekin eskala dezan.

<img src="..." class="img-fluid" alt="Responsive image">

SVG irudiak eta IE 10

Internet Explorer 10-n, SVG irudiek .img-fluidneurrigabeko tamaina dute. Hau konpontzeko, gehitu width: 100% \9;behar den tokian. Konponketa honek beste irudi formatuen tamaina okerra ematen du, beraz, Bootstrap-ek ez du automatikoki aplikatzen.

Irudi txikiak

Gure ertz-erradio utilitateez.img-thumbnail gain, irudi bati 1px ertz itxura biribildua emateko erabil dezakezu .

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

Irudiak lerrokatzea

Lerrokatu irudiak flotatzaile laguntzaileen klaseekin edo testua lerrokatzeko klaseekin . block-level irudiak zentratu daitezke margin utility class erabiliz ..mx-auto

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

Irudia

Elementua elementu bat <picture>baino gehiago zehazteko erabiltzen ari bazara , ziurtatu klaseak etiketara gehitzen dituzula eta ez .<source><img>.img-*<img><picture>

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