الصور المتجاوبة في CSS
غيّرت استعلامات الوسائط التخطيط عند تغيّر عرض نافذة العرض. الصور نقطة ضغط منفصلة: ملف بعرض 4000px داخل عمود ضيق يفيض، يستهلك bandwidth، أو يجعل الصفحة تقفز أثناء التحميل. هذا الدرس يغطي CSS مرن، حجز المساحة، ومصادر أذكى — دون إعادة صياغة @media من الدرس السابق.
صندوق أدوات الصور المتجاوبة
📊 الصور المتجاوبة بنظرة
| القطعة | المهمة اليومية |
|---|---|
max-width: 100% + height: auto |
الصورة تصغر داخل العمود؛ النسبة تبقى |
width / height على <img> أو aspect-ratio في CSS |
يحجز مساحة التخطيط؛ أقل CLS |
srcset + sizes |
المتصفح يختار عرض ملف قريب من العرض الفعلي |
<picture> + <source media> |
اتجاه فني — قص أو أصل مختلف لكل شرط |
object-fit + صندوق ثابت |
قص أو letterbox داخل إطار معروف (درس Object Fit) |
| استعلامات على التخطيط | ما زالت تحرّك الأعمدة — الصورة تتبع عرض الخانة |
طبقتان: عرض التخطيط (حاوية، grid، استعلامات) وسلوك الصورة (مقياس CSS + أي ملف يُحمَّل). أصلح الفيض بـ CSS أولاً؛ أضف srcset عندما يحتاج نفس المشهد ملفات أصغر على الهاتف.
صورة مرنة — max-width وheight: auto
العادة الكلاسيكية: لا تتجاوز الحاوية ولا تشوّه الارتفاع.
.article img {
max-width: 100%;
height: auto;
display: block;
}
تجنّب width: 100% فقط على صور ضخمة بدون max-width. اجمع القواعد المرنة مع مصادر معقولة أو srcset.
حجز المساحة — الأبعاد وaspect-ratio
عندما يعرف المتصفح العرض والارتفاع مبكراً، المحتوى أسفل لا يقفز.
.hero__photo {
width: 100%;
aspect-ratio: 16 / 9;
object-fit: cover;
display: block;
}
للصور التي يجب أن تظهر كاملة، فضّل max-width مرناً. aspect-ratio + cover عندما يفرض التصميم إطاراً ثابتاً.
تبديل الدقة — srcset وsizes
srcset يسرد المرشحين؛ sizes يقول كم عرضاً يُعرض في التخطيط. المتصفح يختار — لست تكتب @media لكل عرض PNG.
<img
src="photo-800.jpg"
srcset="photo-400.jpg 400w, photo-800.jpg 800w, photo-1200.jpg 1200w"
sizes="(min-width: 48rem) 640px, 100vw"
alt="Team at a whiteboard"
width="800"
height="450"
/>
كن صادقاً في sizes: عرض كامل على الجوال ونصف الحاوية على سطح المكتب إن كان CSS كذلك.
الاتجاه الفني مع <picture>
عندما يجب أن يتغيّر القص — hero عمودي على الهاتف، banner عريض على سطح المكتب.
<picture>
<source media="(max-width: 40rem)" srcset="hero-portrait.jpg" />
<source media="(min-width: 41rem)" srcset="hero-landscape.jpg" />
<img src="hero-landscape.jpg" alt="City skyline at dusk" width="1200" height="675" />
</picture>
picture للاتجاه الفني، لا لخمسين نقطة توقف مكررة. غالباً srcset يكفي إذا تغيّرت الدقة فقط.
إطارات ثابتة — تذكير object-fit
الصور المرنة: max-width. البطاقات بارتفاع موحّد: صندوق + object-fit: cover.
.card__thumb {
width: 100%;
height: 12rem;
object-fit: cover;
display: block;
}
العمل مع استعلامات الوسائط
الاستعلامات ما زالت تغيّر الأعمدة؛ الصورة ترث عرض الخانة. حدّث sizes عند تغيّر breakpoint.
جرّب بنفسك
<img>عريض في عمود ضيق —max-width: 100%وheight: auto.- أضف
aspect-ratioعلى hero. srcsetبثلاثة عروض وsizesواقعي.<picture>بقصّين.- thumb بارتفاع ثابت و
object-fit: cover.
أخطاء شائعة
srcضخم بدونsrcsetwidth: 100%بدونheight: autosizes="100vw"بينما CSS يعرض 320pxobject-fitبدون صندوق محدود- إعادة تعليم
@mediaهنا بدل ربط الخانة وsizes
الخلاصة
- CSS مرن يبقي الصور داخل الأعمدة
- الأبعاد أو
aspect-ratioتحجز المكان srcset/sizesللملف؛<picture>للاتجاه الفنيobject-fitللإطارات الثابتة- التالي: Breakpoints — تخطيط نقاط التوقف
🧠 اختبر معرفتك
اختبر معرفتك
تحدى نفسك مع هذا الاختبار التفاعلي واكتشف مدى فهمك للموضوع
📝 التعليمات
- اقرأ كل سؤال بعناية
- اختر أفضل إجابة لكل سؤال
- يمكنك إعادة الاختبار عدة مرات كما تريد
- سيتم عرض تقدمك في الأعلى