Awọn aworan

Iwe ati awọn apẹẹrẹ fun jijade awọn aworan sinu ihuwasi idahun (nitorinaa wọn ko di gbooro ju obi wọn lọ) ati ṣafikun awọn aza iwuwo fẹẹrẹ si wọn — gbogbo nipasẹ awọn kilasi.

Lori iwe yi

Awọn aworan idahun

Awọn aworan ni Bootstrap jẹ idahun pẹlu .img-fluid. Eyi kan max-width: 100%;ati height: auto;aworan naa ki o le ṣe iwọn pẹlu iwọn obi.

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

Awọn eekanna atanpako aworan

Ni afikun si awọn ohun elo redio aala wa , o le lo .img-thumbnaillati fun aworan ni irisi aala 1px yika.

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

aligning images

Ṣe afiwe awọn aworan pẹlu awọn kilasi leefofo oluranlọwọ tabi awọn kilasi titete ọrọ . blockAwọn aworan ipele le jẹ dojukọ nipa lilo kilasi .mx-autoIwUlO ala .

<img src="..." class="rounded float-start" alt="...">
<img src="..." class="rounded float-end" alt="...">

<img src="..." class="rounded mx-auto d-block" alt="...">

<div class="text-center">
  <img src="..." class="rounded" alt="...">
</div>

Aworan

If you are using the <picture>element to specify multiple element <source>for a specific <img>, rii daju pe o fi awọn .img-*kilasi kun si <img>kii ṣe si <picture>tag.

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

Sass

Awọn oniyipada

Awọn oniyipada wa fun awọn eekanna atanpako aworan.

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