Source

Mga imahe

Dokumentasyon at mga halimbawa para sa pag-opt ng mga larawan sa tumutugon na gawi (para hindi sila maging mas malaki kaysa sa kanilang mga pangunahing elemento) at magdagdag ng mga magaan na istilo sa kanila—lahat sa pamamagitan ng mga klase.

Mga larawang tumutugon

Ang mga imahe sa Bootstrap ay ginawang tumutugon sa .img-fluid. max-width: 100%;at height: auto;inilapat sa imahe upang ito ay maka-scale sa parent na elemento.

100%x250 
<img src="..." class="img-fluid" alt="Responsive image">
Mga larawang SVG at IE 10

Sa Internet Explorer 10, ang mga larawang may SVG .img-fluiday hindi katumbas ng laki. Upang ayusin ito, magdagdag width: 100% \9;kung saan kinakailangan. Ang pag-aayos na ito ay hindi wastong nagpapalaki ng iba pang mga format ng larawan, kaya hindi ito awtomatikong inilalapat ng Bootstrap.

Mga thumbnail ng larawan

Bilang karagdagan sa aming mga kagamitan sa border-radius , maaari mong gamitin .img-thumbnailupang bigyan ang isang imahe ng isang bilugan na 1px na hitsura ng hangganan.

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

Pag-align ng mga larawan

I-align ang mga larawan sa mga helper float class o text alignment classes . block-level na mga imahe ay maaaring nakasentro gamit ang .mx-automargin utility class .

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>

Larawan

Kung ginagamit mo ang <picture>elemento upang tumukoy ng maraming <source>elemento para sa isang partikular <img>na , tiyaking idagdag ang mga .img-*klase sa <img>at hindi sa <picture>tag.

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