بوت‌استرپ کلاس‌های آماده برای مدیریت تصاویر داره که باعث میشه خیلی راحت تصاویر ریسپانسیو، گرد، یا استایل‌دار بسازیم.

📌 1. تصویر ریسپانسیو

برای اینکه تصویر در همه دستگاه‌ها درست نمایش داده بشه از کلاس .img-fluid استفاده می‌کنیم:

<img src="https://via.placeholder.com/400x250" class="img-fluid" alt="Responsive image">

🔹 ویژگی‌ها:

• max-width: 100%

• height: auto

یعنی تصویر هیچ‌وقت از عرض والدش بزرگ‌تر نمیشه.

📌 2. تصویر گرد (Rounded)

<img src="https://via.placeholder.com/150" class="rounded" alt="Rounded image">

📌 3. تصویر دایره‌ای (Circle)

<img src="https://via.placeholder.com/150" class="rounded-circle" alt="Circle image">

📌 4. تصویر Thumbnail (عکس بندانگشتی)

<img src="https://via.placeholder.com/200" class="img-thumbnail" alt="Thumbnail image">

🔹 ویژگی‌ها:

• حاشیه باریک (border)

• کمی padding

📌 5. ترازبندی تصاویر (Alignment)

می‌تونی با کلاس‌های float یا mx-auto d-block تصاویر رو تراز کنی:

• چپ‌چین:

<img src="https://via.placeholder.com/150" class="float-start" alt="Left image">

• راست‌چین:

<img src="https://via.placeholder.com/150" class="float-end" alt="Right image">

• مرکز:

<img src="https://via.placeholder.com/150" class="mx-auto d-block" alt="Centered image">

📌 6. تصویر درون Figure (با کپشن)

می‌تونی از تگ <figure> برای نمایش توضیحات استفاده کنی:

<figure class="figure">
  <img src="https://via.placeholder.com/300" class="figure-img img-fluid rounded" alt="...">
  <figcaption class="figure-caption text-center">توضیحات تصویر</figcaption>
</figure>