تصاویر

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

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

تصاویر در بوت استرپ با استفاده از .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برای دادن ظاهری گرد ۱ پیکسلی به تصویر استفاده کنید.

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

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

تصاویر را با کلاس های شناور کمکی یا کلاس های تراز متن تراز کنید . 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>