گالری تصاویر (Image Gallery) در CSS
«گالری تصاویر (Image Gallery)» مجموعه ای از تصاویر است که به شکل منظم و معمولاً واکنش گرا نمایش داده می شود. در این صفحه با تکیه بر HTML ساده و CSS، یک گالری تصویری تمیز می سازیم و سپس آن را برای اندازه های مختلف صفحه بهینه می کنیم.
ساخت گالری تصاویر با Flexbox
ساختار HTML از یک ظرف اصلی و چند آیتم تشکیل می شود. هر آیتم شامل لینک تصویر و توضیح اختیاری است. سپس با Flexbox چیدمان ردیفی و پیچش خودکار را اعمال می کنیم:
- ظرف اصلی برای کل گالری (مثلاً <div class="gallery">).
- یک ظرف برای هر تصویر (مثلاً <div class="gallery-item">) شامل <img> و یک توضیح کوتاه.
div.gallery { display: flex; flex-wrap: wrap; justify-content: flex-start; }
div.gallery-item { margin: 5px; border: 1px solid #ccc; width: 180px; }
div.gallery-item:hover { border: 1px solid #777; }
div.gallery-item img { width: 100%; height: auto; }
div.gallery-item div.desc { padding: 15px; text-align: center; }نکته: با display: flex; تصاویر به صورت ردیفی کنار هم قرار می گیرند و با flex-wrap در عرض های کوچک تر، به ردیف بعدی می روند.
گالری تصاویر واکنش گرا
با media queries می توانیم تعداد ستون ها را در اندازه های مختلف نمایشگر تغییر دهیم؛ مثلاً چهار ستون بالای 768px، دو ستون زیر 768px و چینش ستونی (عرض 100٪) زیر 480px.
نکات چیدمان و دسترس پذیری
نکته: برای جلوگیری از پرش چیدمان، نسبت ابعاد تصاویر را ثابت نگه دارید و متن توضیح را کوتاه بنویسید تا ردیف ها یکنواخت بمانند.
هشدار: از تنظیم پهنای ثابت زیاد خودداری کنید؛ زیرا ممکن است در موبایل باعث اسکرول افقی و تجربه ضعیف شود.
ادامه یادگیری
برای کار با منوها به منوهای کشویی سر بزنید. همچنین تکنیک های بهینه سازی تصاویر را در اسپرایت های تصویری دنبال کنید. این صفحه گالری تصاویر را هم به عنوان مرجع سریع نگه دارید.