Duab

Cov ntaub ntawv thiab cov piv txwv rau kev xaiv cov duab rau hauv kev coj tus cwj pwm (yog li lawv tsis txhob loj dua lawv cov niam txiv cov ntsiab lus) thiab ntxiv cov qauv hnyav rau lawv - tag nrho ntawm cov chav kawm.

Ntawm nplooj ntawv no

Teb cov duab

Cov duab hauv Bootstrap tau teb nrog .img-fluid. Qhov no siv max-width: 100%;thiab height: auto;rau cov duab kom nws ntsuas nrog cov niam txiv lub caij.

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

Duab thumbnails

Ntxiv rau peb cov khoom siv hluav taws xob ciam teb , koj tuaj yeem siv .img-thumbnaillos muab cov duab ib puag ncig 1px ciam teb zoo li.

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

Aligning cov duab

Teem cov duab nrog cov pab cuam ntab cov chav kawm lossis cov chav kawm nyeem ntawv . block-qib cov duab tuaj yeem nyob nruab nrab siv cov .mx-autochav kawm margin utility .

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

Duab

Yog tias koj siv lub <picture>caij los qhia ntau lub <source>ntsiab lus rau ib qho tshwj xeeb <img>, nco ntsoov ntxiv cov .img-*chav kawm rau qhov <img>thiab tsis yog rau lub <picture>cim.

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

Sass

Hloov pauv

Cov kev hloov pauv muaj rau cov duab thumbnails.

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