تصاویر در بوت استرپ 4

گوشه های گرد

کلاس .rounded گوشه های گرد را به یک تصویر اضافه می کند:

 <img src="cinqueterre.jpg" class="rounded" alt="Cinque Terre"> 

دایره ای

کلاس .rounded-circle تصویر را به یک شکل دایره تبدیل میکند.

 <img src="cinqueterre.jpg" class="rounded-circle" alt="Cinque Terre"> 

تصویر بند انگشتی

کلاس .img-thumbnail تصویر را به یک تصویر کوچک شکل می دهد:

 <img src="cinqueterre.jpg" class="img-thumbnail" alt="Cinque Terre"> 

ترتیب تصاویر

برای قرار دادن تصویر به سمت راست از .float-right . برای قراردادن تصاویر در چپ از .float-left: استفاده میکنیم.

 <img src="paris.jpg" class="float-left">
<img src="paris.jpg" class="float-right"> 

تصاویر ریسپانسیو

تصاویر در همه اندازه ها وجود دارد بنابر صفحه نمایش ها در هر اندازه ای وجود دارد. تصاویر ریسپانسیو به صورت خودکار به اندازه صفحه نمایش تنظیم می شوند.

با اضافه کردن یک کلاس .img-fluid به تگ <img> ،تصاویر پاسخگو ایجاد کنید. سپس تصویر به سادگی به عنصر اصلی تبدیل می شود.

کلاس.img-fluid حداکثر عرض را اعمال می کند: max-width: 100%; و height: auto;

 <img class="img-fluid" src="img_chania.jpg" alt="Chania">