عکس‌های Bootstrap 5
- صفحه قبل جداول BS5
- صفحه بعدی جومبرو BS5
شکل تصویر
شکل گوشه‌ها
.rounded کلاس برای تصویر اضافه کردن گوشه‌های گرد می‌کند:
مثال
<img src="flower.jpg" class="rounded" alt="Flower">
دایره‌ای
.rounded-circle کلاس تصویر را به شکل دایره‌ای در می‌آورد:
مثال
<img src="flower.jpg" class="rounded-circle" alt="Cinque Terre">
تصویر کوچک
.img-thumbnail کلاس تصویر را به عنوان تصویر کوچک (با حاشیه) در می‌آورد:
مثال
<img src="flower.jpg" class="img-thumbnail" alt="Cinque Terre">
تصویر را در خط راست قرار دهید
استفاده .float-start کلاس تصویر را به چپ می‌کشد، یا از .float-end پایین رفتن به سمت راست:
مثال
<img src="tulip.jpg" class="float-start"> <img src="tulip.jpg" class="float-end">
تصویر در وسط
برای اینکه تصویر در وسط قرار گیرد، ما از کلاس‌های ابزار استفاده کردیم تا تصویر را به وسط بیاوریم .mx-auto (margin:auto) اور .d-block (display:block):
مثال
<img src="tulip.jpg" class="mx-auto d-block">
تصاویر پاسخگو
تصاویر در اندازه‌های مختلفی دارند. صفحه نمایش نیز همینطور است. تصاویر پاسخگو به طور خودکار تنظیم می‌شوند تا با اندازه صفحه سازگار شوند.
از طریق اضافه کردن .img-fluid کلاس به <img> برچسب‌ها برای ایجاد تصاویر پاسخگو استفاده کنید. سپس تصاویر به خوبی کوچک‌تر یا بزرگ‌تر می‌شوند تا با عنصر والد خود هماهنگ شوند.
.img-fluid کلاس برای استفادہ از تصاویر max-width: 100%; اور height: auto; :
مثال
<img class="img-fluid" src="tiyugongyuan.jpg" alt="New York">
- صفحه قبل جداول BS5
- صفحه بعدی جومبرو BS5
