Responsive Web Design - Images
🔹 استفاده از خاصیت max-width: 100%
این روش باعث میشه تصویر با عرض صفحه تطبیق پیدا کنه و از صفحه بیرون نزنه.
✅ تصویر بهصورت خودکار کوچک یا بزرگ میشه ولی کیفیتش حفظ میشه.
🔹 استفاده از تصاویر انعطافپذیر (Flexible Images)
گاهی میخوایم تصویر در اندازههای مختلف نمایشگر درست دیده بشه.
📌 با این کار، تصویر نسبتش رو حفظ میکنه و کشیده یا فشرده نمیشه.
🔹 استفاده از ویژگی picture
برای نمایش تصاویر متفاوت در دستگاههای مختلف میتونیم از <picture>
استفاده کنیم.
📌 مرورگر بهطور خودکار مناسبترین تصویر رو انتخاب میکنه.
🔹 نکته مهم
-
استفاده از
max-width
سادهترین روشه. -
برای بهینهسازی سرعت سایت بهتره از تصاویر سبکتر (فرمتهایی مثل WebP) استفاده کنی.
-
در طراحی واکنشگرا، تصاویر باید مثل متن، انعطافپذیر باشن.