Source

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.

100% x250 
<img src="..." class="img-fluid" alt="Responsive image">
Foto SVG na IE 10

Na Internet Explorer 10, onyonyo SVG nwere na .img-fluid-enweghị oke nha. Iji dozie nke a, tinye width: 100% \9;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-thumbnailnye onyonyo n'ọdịdị oke 1px gbara okirikiri.

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

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 .

200x200 200x200 
<img src="..." class="rounded float-left" alt="...">
<img src="..." class="rounded float-right" alt="...">
200x200 
<img src="..." class="rounded mx-auto d-block" alt="...">
200x200 
<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>