انځورونه

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

په دې پاڼه کې

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

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

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

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

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

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

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

انځورونه د مرستندویه فلوټ ټولګیو یا د متن سمون ټولګیو سره تنظیم کړئ . د کچې انځورونه د حاشیې یوټیلټي کلاسblock په کارولو سره مرکز کیدی شي ..mx-auto

<img src="..." class="rounded float-start" alt="...">
<img src="..." class="rounded float-end" 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>

ساس

متغیرات

تغیرات د عکس تمبیلونو لپاره شتون لري.

$thumbnail-padding:                 .25rem;
$thumbnail-bg:                      $body-bg;
$thumbnail-border-width:            $border-width;
$thumbnail-border-color:            $gray-300;
$thumbnail-border-radius:           $border-radius;
$thumbnail-box-shadow:              $box-shadow-sm;