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ị.
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-thumbnail
nye 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 . block
Enwere ike ịgbado onyonyo -larịị site na iji .mx-auto
klaasị 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;