Ruka hadi kwa yaliyomo kuu Ruka hadi kwenye urambazaji wa hati

Hati na mifano ya kuchagua picha kuwa tabia ya kuitikia (ili zisiwe pana zaidi ya mzazi wao) na kuziongeza mitindo nyepesi—yote kupitia madarasa.

Picha za mwitikio

Picha katika Bootstrap zinafanywa kuitikia na .img-fluid. Hii inatumika max-width: 100%;na height: auto;kwa picha ili iwe na upana wa mzazi.

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

Vijipicha vya picha

Kando na huduma zetu za kipenyo cha mpaka , unaweza kutumia .img-thumbnailkuipa picha mwonekano wa mpaka wa 1px.

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="...">

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-automatumizi ya pembezoni .

Placeholder 200x200 Placeholder 200x200
<img src="..." class="rounded float-start" alt="...">
<img src="..." class="rounded float-end" alt="...">
Placeholder 200x200
<img src="..." class="rounded mx-auto d-block" alt="...">
Placeholder 200x200
<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>

Sass

Vigezo

Vigezo vinapatikana kwa vijipicha vya picha.

$thumbnail-padding:                 .25rem;
$thumbnail-bg:                      $body-bg;
$thumbnail-border-width:            $border-width;
$thumbnail-border-color:            $gray-300;
$thumbnail-border-radius:           $border-radius;
$thumbnail-box-shadow:              $box-shadow-sm;