Source

Mga larawan

Dokumentasyon ug mga panig-ingnan sa pagpili sa mga hulagway ngadto sa responsive nga kinaiya (aron sila dili mahimong mas dako pa kay sa ilang mga ginikanan nga mga elemento) ug makadugang sa gaan nga mga estilo ngadto kanila—tanan pinaagi sa mga klase.

Matubag nga mga imahe

Ang mga imahe sa Bootstrap gihimo nga responsive sa .img-fluid. max-width: 100%;ug height: auto;gipadapat sa imahe aron kini motimbang sa elemento sa ginikanan.

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

Mga hulagway sa SVG ug IE 10

Sa Internet Explorer 10, ang mga imahe sa SVG nga adunay .img-fluiddili parehas nga kadako. Aron ayuhon kini, idugang width: 100% \9;kon gikinahanglan. Kini nga pag-ayo dili husto ang gidak-on sa ubang mga format sa imahe, mao nga ang Bootstrap dili awtomatikong magamit kini.

Mga thumbnail sa imahe

Dugang pa sa among mga gamit sa border-radius , mahimo nimong gamiton .img-thumbnailaron mahatagan ang usa ka imahe ug usa ka lingin nga 1px nga hitsura sa utlanan.

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

Pag-align sa mga imahe

I-align ang mga hulagway sa helper float nga mga klase o text alignment nga mga klase . block-level nga mga hulagway mahimong masentro gamit ang .mx-automargin utility class .

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

Hulagway

Kung gigamit nimo ang <picture>elemento aron mahibal-an ang daghang <source>mga elemento alang sa usa ka piho <img>, siguruha nga idugang ang mga .img-*klase sa <img>ug dili sa <picture>tag.

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