Picha
Hati na mifano ya kuchagua picha kuwa tabia ya kuitikia (ili zisiwahi kuwa kubwa kuliko vipengele vyao kuu) na kuziongeza mitindo nyepesi—yote kupitia madarasa.
Picha za mwitikio
Picha katika Bootstrap zinafanywa kuitikia na .img-fluid
. max-width: 100%;
na height: auto;
hutumika kwa picha ili iwe na kipengee cha mzazi.
<img src="..." class="img-fluid" alt="...">
Picha za SVG na Internet Explorer
Katika Internet Explorer 10 na 11, picha za SVG zenye .img-fluid
ukubwa usio na uwiano. Ili kurekebisha hili, ongeza width: 100%;
au .w-100
inapobidi. Marekebisho haya hukuza ukubwa wa fomati zingine za picha isivyofaa, kwa hivyo Bootstrap haitumii kiotomatiki.
Vijipicha vya picha
Kando na huduma zetu za kipenyo cha mpaka , unaweza kutumia .img-thumbnail
kuipa picha mwonekano wa mpaka wa 1px.
<img src="..." class="img-thumbnail" alt="...">
Kupanga picha
Pangilia picha na madarasa ya kuelea ya msaidizi au madarasa ya upatanishi wa maandishi . block
-level picha zinaweza kuwekwa katikati kwa kutumia darasa la .mx-auto
matumizi ya pembezoni .
<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>
Picha
Ikiwa unatumia <picture>
kipengee kubainisha <source>
vipengele vingi kwa maalum <img>
, hakikisha kuwa umeongeza .img-*
madarasa kwenye <img>
na si kwa <picture>
lebo.
<picture>
<source srcset="..." type="image/svg+xml">
<img src="..." class="img-fluid img-thumbnail" alt="...">
</picture>