Source

Fakkiiwwan

Galmee fi fakkeenyota fakkiiwwan gara amala deebii kennuutti filachuuf (kanaaf isaan gonkumaa elementoota warra isaanii caalaa hin guddatan) fi akkaataa salphaa itti dabaluuf-hundi karaa gitaa.

Fakkiiwwan deebii kennan

Fakkiiwwan Bootstrap keessa jiran .img-fluid. max-width: 100%;fi height: auto;fakkii irratti akka inni elementii warraa wajjin iskeelii godhutti hojii irra oola.

Placeholder Responsive image 
<img src="..." class="img-fluid" alt="Responsive image">
Fakkiiwwan SVG fi IE 10

Internet Explorer 10 keessatti, fakkiiwwan SVG with .img-fluidguddina wal hin madaalle qabu. Kana sirreessuuf width: 100% \9;bakka barbaachisaa ta'etti itti dabali. Sirreeffamni kun bifa fakkii biroo sirnaan safara, kanaaf Bootstrap ofumaan hin hojiirra oolchu.

Fakkiiwwan xiqqaa

Faayidaa keenya border-radius.img-thumbnail dabalatee , fakkii tokkoof bifa daangaa geengoo 1px kennuudhaaf fayyadamuu dandeessa .

A generic square placeholder image with a white border around it, making it resemble a photograph taken with an old instant camera 200x200 
<img src="..." alt="..." class="img-thumbnail">

Fakkiiwwan qindeessuu

Fakkiiwwan gita yaa'aa gargaaraa ykn gita qindeessaa barruu waliin qindeessii . fakkiiwwan sadarkaa -gita faayidaa marginblock fayyadamuun giddugaleessa gochuun ni danda'ama ..mx-auto

Placeholder 200x200 Placeholder 200x200 
<img src="..." class="rounded float-left" alt="...">
<img src="..." class="rounded float-right" alt="...">
Placeholder 200x200 
<img src="..." class="rounded mx-auto d-block" alt="...">
Placeholder 200x200 
<div class="text-center">
  <img src="..." class="rounded" alt="...">
</div>

Suuraa

Yoo qaama fayyadamtee elementoota <picture>hedduu murtaa'eef ifteessuuf jirta ta'e, gitaalee gara mallattootti dabaluu fi osoo hin taane gara mallattootti dabaluu mirkaneessi .<source><img>.img-*<img><picture>

<picture>
  <source srcset="..." type="image/svg+xml">
  <img src="..." class="img-fluid img-thumbnail" alt="...">
</picture>