معرض الصور بـ CSS
القوائم المنسدلة تُعشّش قوائم تحت الروابط. معرض الصور مكوّن مختلف: شبكة هادئة من الصور المصغّرة يمسحها الناس بنظرة. وحّد أحجام المصغّرات، اترك الصف يلتف، اقتص بـ object-fit، واترك الشبكات الاستجابة الأعمق لوحدات Flexbox و Grid التالية.
مجموعة أدوات المعرض
📊 معرض الصور بنظرة سريعة
| القطعة | المهمة اليومية |
|---|---|
| قائمة المعرض | غلاف يرتّب المصغّرات في صف ملتف أو شبكة |
| حجم المصغّرة | عرض/ارتفاع مشترك حتى تبدو المجموعة متناسقة |
object-fit: cover |
يملأ صندوق المصغّرة دون تمدّد مشوّه |
| Gap / margin | مساحة تنفّس بين الصور |
| إشارة hover | ملاحظات خفيفة دون قفز التخطيط |
| التعليق | اختياري بـ figure/figcaption للمعنى |
استخدم عناصر <img> حقيقية مع نص alt مفيد. الرسومات الزخرفية فقط مكانها غير هنا — المعارض عادةً محتوى.
معرض flex مع الالتفاف
حاوية flex مع wrap تحوّل قائمة المصغّرات إلى صف متجاوب ينزل للسطر التالي. الـ gap يبقي المسافات صادقة.
.gallery {
display: flex;
flex-wrap: wrap;
gap: 0.75rem;
list-style: none;
margin: 0;
padding: 0;
}
صندوق مصغّرة مشترك + cover
أعطِ كل صورة نفس الصندوق، ثم اقتص بـ cover حتى تتشارك الصور العمودية والأفقية إيقاعًا واحدًا.
.gallery img {
width: 160px;
height: 120px;
object-fit: cover;
display: block;
border-radius: 0.35rem;
}
الأشكال والتعليقات
عندما يهمّ التسمية، غلّف الصورة في figure وأضف figcaption. أبقِ نص التعليق قصيرًا تحت المصغّرة.
.gallery figure {
margin: 0;
width: 160px;
}
.gallery figcaption {
margin-top: 0.35rem;
font-size: 0.85rem;
color: #555;
}
ملاحظات hover خفيفة
اخفض الشفافية أو زد السطوع قليلًا عند التحويم. تجنّب تحجيمًا هائلًا يدفع الجيران ما لم تخطّط للتكديس بعناية.
.gallery a:hover img {
opacity: 0.88;
outline: 2px solid #0b5fff;
outline-offset: 2px;
}
عادة معرض هادئة
صناديق مصغّرات متساوية، wrap + gap، object-fit: cover، ونص alt ذو معنى. فضّل دروس Flex/Grid التالية للبناء المتجاوب المتقدّم — ولا تخلط هذا بالقوائم المنسدلة.
.gallery { /* wrapping track */ }
.gallery__item { /* each thumb cell */ }
.gallery__img { /* the img */ }
.gallery__cap { /* optional caption */ }
جرّب بنفسك
- ابنِ قائمة
.galleryبـ flex wrap لصور مرتبطة. - عيّن عرضًا/ارتفاعًا مشتركًا و
object-fit: cover. - أضف
figure/figcaptionعلى عنصر واحد. - صمّم hover خفيفًا بالشفافية أو الإطار.
- اكتب جملة: ماذا سيعلّمك Grid أفضل من هذا المخطط الملتف؟
أخطاء شائعة
- خلط ارتفاعات عشوائية بلا صندوق مشترك أو object-fit
- gap صفر فيلتصق المصغّرات ببعضها
- معاملة المعارض كقوائم منسدلة متداخلة
- وضع absolute لكل مصغّرة في كومة هشّة
altفارغ على صور ذات معنى
الملخص
- المعارض مجموعات ملتفّة من مصغّرات متساوية
- الحجم المشترك +
object-fit: coverيحفظ الإيقاع مرتّبًا - flex wrap + gap تخطيط بداية هادئ
- التعليقات وإشارات hover تبقى اختيارية وخفيفة
- وحدات Flexbox/Grid تعمّق المعارض المتجاوبة لاحقًا
🧠 اختبر معرفتك
اختبر معرفتك
تحدى نفسك مع هذا الاختبار التفاعلي واكتشف مدى فهمك للموضوع
📝 التعليمات
- اقرأ كل سؤال بعناية
- اختر أفضل إجابة لكل سؤال
- يمكنك إعادة الاختبار عدة مرات كما تريد
- سيتم عرض تقدمك في الأعلى