Responsive Web Design - Images

🔹 استفاده از خاصیت max-width: 100%

این روش باعث میشه تصویر با عرض صفحه تطبیق پیدا کنه و از صفحه بیرون نزنه.

<img src="example.jpg" style="max-width:100%; height:auto;">

✅ تصویر به‌صورت خودکار کوچک یا بزرگ میشه ولی کیفیتش حفظ میشه.

🔹 استفاده از تصاویر انعطاف‌پذیر (Flexible Images)

گاهی می‌خوایم تصویر در اندازه‌های مختلف نمایشگر درست دیده بشه.

img { max-width: 100%; height: auto; }

📌 با این کار، تصویر نسبتش رو حفظ می‌کنه و کشیده یا فشرده نمیشه.

🔹 استفاده از ویژگی picture

برای نمایش تصاویر متفاوت در دستگاه‌های مختلف می‌تونیم از <picture> استفاده کنیم.

<picture> <source srcset="image-large.jpg" media="(min-width: 800px)"> <source srcset="image-small.jpg" media="(max-width: 799px)"> <img src="image-default.jpg" alt="Responsive Image"> </picture>

📌 مرورگر به‌طور خودکار مناسب‌ترین تصویر رو انتخاب می‌کنه.

🔹 نکته مهم

  • استفاده از max-width ساده‌ترین روشه.

  • برای بهینه‌سازی سرعت سایت بهتره از تصاویر سبک‌تر (فرمت‌هایی مثل WebP) استفاده کنی.

  • در طراحی واکنش‌گرا، تصاویر باید مثل متن، انعطاف‌پذیر باشن.