Nɔnɔmetatawo
Nuŋlɔɖiwo kple kpɔɖeŋuwo hena nɔnɔmetatawo tiatia ɖe nuwɔna si ɖoa nya ŋu me (ale be woagakeke wu wo dzila gbeɖe o) eye woatsɔ atsyã siwo mesẽ o akpe ɖe wo ŋu—wo katã to klasswo dzi.
Nɔnɔmetata siwo ɖoa nya ŋu
Wowɔa nɔnɔmetata siwo le Bootstrap me be woawɔ dɔ kple .img-fluid
. Esia ku ɖe nɔnɔmetata la ŋu max-width: 100%;
eye height: auto;
wòawɔ dɔ ɖe edzi ale be wòadzidze kple dzila ƒe kekeme.
<img src="..." class="img-fluid" alt="...">
Nɔnɔmetata ƒe nɔnɔmetata suewo
Tsɔ kpe ɖe míaƒe border-radius utilities ŋu la, àteŋu azã .img-thumbnail
atsɔ ana nɔnɔmetata aɖe nadze abe 1px liƒo ƒe dzedzeme si le goglo ene.
<img src="..." class="img-thumbnail" alt="...">
Nɔnɔmetatawo ɖoɖo ɖe ɖoɖo nu
Ðo nɔnɔmetatawo ɖe ɖoɖo nu kple kpeɖeŋutɔ ƒe float klasswo alo nuŋɔŋlɔ ƒe ɖoɖowɔwɔ ƒe klasswo . block
-level nɔnɔmetatawo ateŋu aɖo titina to margin utility class zazã me.mx-auto
.
<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>
Nutata
Ne èle element la zãm tsɔ le <picture>
element geɖe <source>
gblɔm na , aɖe koŋ <img>
la, kpɔ egbɔ be yetsɔ .img-*
klassawo kpe ɖe tag la ŋu <img>
eye menye ɖe <picture>
tag la ŋu o.
<picture>
<source srcset="..." type="image/svg+xml">
<img src="..." class="img-fluid img-thumbnail" alt="...">
</picture>
Sass ƒe nyawo
Nusiwo trɔna
Trɔtrɔwo li na nɔnɔmetata ƒe nɔnɔmetata suewo.
$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;