گالری تصویر با CSS
درس dropdown منو را زیر پیوند تو در تو کرد. گالری تصویر کامپوننت دیگری است: شبکهٔ آرام thumbnail که آدم‌ها مرور می‌کنند. اندازهٔ thumbها را یکی کنید، ردیف را wrap کنید، با object-fit ببُرید، و شبکهٔ واکنش‌گرای عمیق‌تر را به ماژول‌های Flexbox و Grid بعدی بسپارید.
جعبهٔ ابزار گالری
📊 گالری تصویر یک‌نگاهه
| قطعه | کار روزمره |
|---|---|
| لیست گالری | پوششی که thumbها را در ردیف پیچیده یا شبکه می‌چیند |
| اندازهٔ thumb | عرض/ارتفاع مشترک تا مجموعه یکدست دیده شود |
object-fit: cover |
قاب thumb را پر می‌کند بدون کش‌آمدن زشت |
| Gap / margin | نفس بین تصویرها |
| نشانهٔ hover | بازخورد نرم بدون پریدن چیدمان |
| Caption | اختیاری با figure/figcaption برای معنا |
از <img> واقعی با alt مفید استفاده کنید. اسپریت فقط‌تزئینی جای دیگری است — گالری معمولاً محتواست.
گالری flex با wrap
ظرف flex با wrap لیست thumb را به ردیف واکنش‌گرا تبدیل می‌کند که به خط بعد می‌افتد. gap فاصله را صادق نگه می‌دارد.
.gallery {
display: flex;
flex-wrap: wrap;
gap: 0.75rem;
list-style: none;
margin: 0;
padding: 0;
}
قاب مشترک thumb + cover
به هر تصویر همان جعبه را بدهید، بعد با cover ببُرید تا پرتره و افقی یک ریتم داشته باشند.
.gallery img {
width: 160px;
height: 120px;
object-fit: cover;
display: block;
border-radius: 0.35rem;
}
figure و کپشن
وقتی برچسب مهم است، تصویر را در figure بپیچید و figcaption بگذارید. متن کپشن را زیر thumb کوتاه نگه دارید.
.gallery figure {
margin: 0;
width: 160px;
}
.gallery figcaption {
margin-top: 0.35rem;
font-size: 0.85rem;
color: #555;
}
بازخورد نرم hover
روی hover کمی کم‌رنگ یا روشن کنید. از scale غول‌آسا که همسایه را هُل بدهد پرهیز کنید مگر stacking را عمدی چیده باشید.
.gallery a:hover img {
opacity: 0.88;
outline: 2px solid #0b5fff;
outline-offset: 2px;
}
عادت آرام گالری
قاب thumb یکدست، wrap + gap، object-fit: cover، alt معنادار. برای masonry واکنش‌گرای پیشرفته درس‌های Flex/Grid بعدی را ترجیح دهید — با منوی dropdown قاطی نکنید.
.gallery { /* مسیر wrap */ }
.gallery__item { /* هر سلول thumb */ }
.gallery__img { /* همان img */ }
.gallery__cap { /* کپشن اختیاری */ }
خودتان امتحان کنید
- لیست
.galleryبا flex wrap از تصویرهای لینک‌شده بسازید. - عرض/ارتفاع مشترک و
object-fit: coverبگذارید. - روی یک آیتم
figure/figcaptionاضافه کنید. - hover نرم با opacity یا outline استایل کنید.
- یک جمله بنویسید: Grid چه چیزی را بهتر از این اسکچ wrap یاد می‌دهد؟
اشتباه‌های رایج
- ارتفاع‌های درهم بدون قاب مشترک یا object-fit
- gap صفر تا thumbها به هم بچسبند
- دیدن گالری مثل منوی تو در تو dropdown
- absolute کردن هر thumb به تودهٔ شکننده
altخالی روی عکس معنادار
جمع‌بندی
- گالری مجموعهٔ wrap از thumbnail یکدست است
- اندازهٔ مشترک +
object-fit: coverریتم را مرتب نگه می‌دارد - flex wrap + gap چیدمان شروع آرام است
- کپشن و hover اختیاری و سبک بمانند
- ماژول‌های Flexbox/Grid گالری واکنش‌گرا را عمیق‌تر می‌کنند
🧠 دانش خود را بیازمایید
دانش خود را بیازمایید
خود را با این آزمون تعاملی به چالش بکشید و ببینید موضوع را چقدر خوب درک کرده‌اید
📝 دستورالعمل‌ها
- هر سوال را با دقت بخوانید
- بهترین پاسخ را برای هر سوال انتخاب کنید
- می‌توانید آزمون را هر چند بار که می‌خواهید تکرار کنید
- پیشرفت شما در بالا نمایش داده می‌شود