CSS - RWD Responsive Images الصور المتجاوبة

CSS - الصور المتجاوبة (Responsive Images)

🔸 الصور المتجاوبة هي صور تتغير أبعادها تلقائيًا لتناسب حجم الشاشة أو العنصر الحاوي لها، مما يحسن تجربة المستخدم على الهواتف والشاشات الصغيرة.

🧪 جعل الصور مرنة باستخدام CSS

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

📌 هذا يجعل الصورة لا تتجاوز حجم العنصر الحاوي لها، وتُحافظ على نسبة الطول إلى العرض.

🧪 مثال عملي

<div style="width: 50%;">
  <img src="img.jpg" alt="صورة" style="max-width:100%; height:auto;">
</div>

📌 ستأخذ الصورة 50% من عرض الصفحة أو الحاوية، وتظل متناسبة.

📷 استخدام <picture> لعرض صور مختلفة حسب الجهاز

يمكنك استخدام وسم <picture> لعرض صورة معينة على الجوال وأخرى على الشاشات الكبيرة:

<picture>
  <source srcset="img-small.jpg" media="(max-width: 600px)">
  <source srcset="img-large.jpg" media="(min-width: 601px)">
  <img src="img-default.jpg" alt="صورة متجاوبة">
</picture>

📌 المتصفح يختار الصورة المناسبة بناءً على حجم الشاشة.

📌 ملاحظات هامة

• استخدم max-width: 100% بدل width الثابت لتجعل الصورة تستجيب لحجم العنصر.
• استخدم <picture> و srcset لاختيار أنسب صورة لكل جهاز.
• تأكد من ضبط viewport في رأس الصفحة:

<meta name="viewport" content="width=device-width, initial-scale=1.0">