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
. max-width: 100%;
a na height: auto;
-etinyekwa ya n'ihe onyonyo a ka o wee were ihe nne na nna tụọ ya.
<img src="..." class="img-fluid" alt="...">
Ihe onyonyo SVG na Internet Explorer
Na Internet Explorer 10 na 11, onyonyo SVG nwere na .img-fluid
-enweghị oke nha. Iji dozie nke a, tinye width: 100%;
ma ọ bụ .w-100
ebe ọ dị mkpa. Nke a na-edozi nha nke ụdị onyonyo ndị ọzọ na-ekwesịghị ekwesị, yabụ Bootstrap anaghị etinye ya na akpaghị aka.
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-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>
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>