Source

انځورونه

د عکسونو غوره کولو لپاره اسناد او مثالونه ځواب ورکوونکي چلند ته (له دې امله دوی هیڅکله د خپلو اصلي عناصرو څخه لوی نه کیږي) او دوی ته لږ وزن لرونکي سټایلونه اضافه کړئ - ټول د ټولګیو له لارې.

ځواب ورکوونکي انځورونه

په بوټسټریپ کې عکسونه د ځواب ویونکي سره جوړ شوي .img-fluid. max-width: 100%;او height: auto;په عکس کې پلي کیږي ترڅو دا د اصلي عنصر سره اندازه شي.

<img src="..." class="img-fluid" alt="Responsive image">

د SVG انځورونه او IE 10

په انټرنیټ اکسپلورر 10 کې، د SVG عکسونه .img-fluidپه غیر متناسب اندازې سره دي. د دې د حل کولو لپاره، که width: 100% \9;اړتیا وي اضافه کړئ. دا فکس په ناسم ډول د نورو عکس فارمیټونو اندازه کوي، نو بوټسټریپ دا په اوتومات ډول نه پلي کوي.

د انځور تمبیلونه

زموږ د پولو ریډیس اسانتیاو سربیره ، تاسو کولی شئ .img-thumbnailیو انځور ته د 1px ګردي بڼه ورکولو لپاره وکاروئ.

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

د انځورونو سمون

انځورونه د مرستندویه فلوټ ټولګیو یا د متن سمون ټولګیو سره تنظیم کړئ . د کچې انځورونه د حاشیې یوټیلټي کلاسblock په کارولو سره مرکز کیدی شي ..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>

انځور

که تاسو د یو ځانګړي لپاره <picture>ډیری <source>عناصر مشخص کولو لپاره عنصر کاروئ <img>، ډاډ ترلاسه کړئ چې .img-*ټولګي په ټګ کې اضافه کړئ <img>او نه په <picture>ټګ کې.

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