Onyonyo

Akwụkwọ na ihe atụ maka ịhọrọ onyonyo n'ime omume nnabata (ya mere, ha anaghị ebu ibu karịa ihe nne na nna ha) wee tinye ha ụdị dị fechaa - niile site na klaasị.

Na ibe a

Onyonyo na-anabata

A na-eme ihe onyonyo dị na Bootstrap nke ọma na .img-fluid. Nke a na-emetụta max-width: 100%;na height: auto;onyonyo ka o wee jiri ihe nne na nna tụọ ya.

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

Foto mkpirisi

Na mgbakwunye na akụrụngwa radius anyị , ị nwere ike iji .img-thumbnailnye onyonyo n'ọdịdị oke 1px gbara okirikiri.

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

Na-ahazi onyonyo

Hazie onyonyo na klaasị sere n'elu ma ọ bụ klaasị nhazi ederede . blockEnwere ike ịgbado onyonyo -larịị site na iji .mx-autoklaasị oke .

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

Foto

If you are using the <picture>element to specify multiple <source>elements for a specific <img>, jide n'aka na itinye .img-*klaasị na <img>na ọ bụghị na <picture>mkpado.

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

Sass

Mgbanwe

Ọdịiche dị maka obere mkpirisi onyonyo.

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