تصاویر Bootstrap 5
- صفحه قبل BS5 جدول
- صفحه بعدی BS5 Jumbotron
شکل تصویر
شکل گوشه‌ها
.rounded طبقه برای تصویر گوشه‌ها را گرد می‌کند:
مثال
<img src="flower.jpg" class="rounded" alt="Flower">
دایره‌ای
.rounded-circle طبقه تصویر را به شکل دایره‌ای شکل می‌دهد:
مثال
<img src="flower.jpg" class="rounded-circle" alt="Cinque Terre">
miniature
.img-thumbnail طبقه تصویر را به عنوان miniature (با حاشیه) شکل می‌دهد:
مثال
<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 Jumbotron
