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 woagalolo wu wo dzilawo ƒe akpawo gbeɖe o) eye woatsɔ atsyã siwo le bɔbɔe 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
. max-width: 100%;
eye height: auto;
wotsɔa wo dea nɔnɔmetata la dzi ale be wòadzidze kple dzila ƒe akpaa.
<img src="..." class="img-fluid" alt="...">
SVG nɔnɔmetatawo kple Internet Explorer
Le Internet Explorer 10 kple 11 me la, SVG nɔnɔmetatawo kple .img-fluid
ƒe lolome mesɔ gbɔ o. Be nàɖɔ esia ɖo la, tsɔ kpe ɖe eŋu width: 100%;
alo .w-100
le afisi wòhiã le. Ðɔɖɔɖo sia trɔa nɔnɔmetata ƒe nɔnɔme bubuwo ƒe lolome le mɔ gbegblẽ nu, eyata Bootstrap mewɔa eŋudɔ le eɖokui si o.
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-left" alt="...">
<img src="..." class="rounded float-right" alt="...">
<img src="..." class="rounded mx-auto d-block" alt="...">
<div class="text-center">
<img src="..." class="rounded" alt="...">
</div>
Nutata
Ne èle <picture>
element la zãm tsɔ le nu 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>