Source

تصاویر

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

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

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

Placeholder Responsive image 
<img src="..." class="img-fluid" alt="Responsive image">
تصاویر SVG و IE 10

در اینترنت اکسپلورر 10، تصاویر SVG دارای .img-fluidاندازه نامتناسب هستند. برای رفع این مشکل، width: 100% \9;جایی که لازم است اضافه کنید. این اصلاح فرمت های دیگر تصویر را به درستی اندازه نمی دهد، بنابراین بوت استرپ آن را به طور خودکار اعمال نمی کند.

ریز عکسها

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

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

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

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

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>

تصویر

اگر از <picture>عنصر برای تعیین چندین <source>عنصر برای یک عنصر خاص استفاده می‌کنید <img>، مطمئن شوید که .img-*کلاس‌ها را به برچسب اضافه می‌کنید <img>و نه به <picture>تگ.

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