تصاویر

مستندات و نمونه هایی برای انتخاب تصاویر در رفتار پاسخگو (بنابراین آنها هرگز بزرگتر از عناصر اصلی خود نمی شوند) و سبک های سبک وزن را به آنها اضافه کنید - همه از طریق کلاس ها.

تصاویر واکنش گرا

تصاویر در بوت استرپ با استفاده از .img-fluid. max-width: 100%;و height: auto;روی تصویر اعمال می شوند تا با عنصر والد مقیاس شود.

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

ریز عکسها

علاوه بر ابزارهای حاشیه شعاع ما ، می‌توانید .img-thumbnailبرای دادن ظاهری گرد ۱ پیکسلی به تصویر استفاده کنید.

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

تراز کردن تصاویر

تصاویر را با کلاس های شناور کمکی یا کلاس های تراز متن تراز کنید . blockتصاویر سطح را می توان با استفاده از .mx-autoکلاس ابزار margin در مرکز قرار داد .

<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>