گالری تصاویر (Image Gallery)
«گالری تصاویر (Image Gallery)» یعنی چند عکس کنار هم و مرتب. «واکنش گرا (Responsive)» یعنی چیدمان با اندازه صفحه هماهنگ شود. اینجا با «فلکس باکس (Flexbox)» یعنی سیستم چیدمان انعطاف پذیر، گالری می سازیم. مثل تابلو اعلانات مدرسه که با فضای خالی، قرینه می چینید.
ساخت گالری تصاویر با CSS
یک ظرف اصلی برای گالری بساز. سپس برای هر عکس یک آیتم جدا قرار بده. تصویر و توضیح داخل همان آیتم می آید.
<html>
<head>
<style>
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;
}
</style>
</head>
<body>
<div class="gallery">
<div class="gallery-item">
<a target="_blank" href="img_5terre.jpg">
<img src="img_5terre.jpg" alt="Cinque Terre" width="600" height="400">
</a>
<div class="desc">Cinque Terre</div>
</div>
<div class="gallery-item">
<a target="_blank" href="img_forest.jpg">
<img src="img_forest.jpg" alt="Forest" width="600" height="400">
</a>
<div class="desc">Green Forest</div>
</div>
<div class="gallery-item">
<a target="_blank" href="img_lights.jpg">
<img src="img_lights.jpg" alt="Northern Lights" width="600" height="400">
</a>
<div class="desc">Northern Lights</div>
</div>
<div class="gallery-item">
<a target="_blank" href="img_mountains.jpg">
<img src="img_mountains.jpg" alt="Mountains" width="600" height="400">
</a>
<div class="desc">Mountains</div>
</div>
</div>
</body>
</html>
نکته: فلکس باکس ردیف ها را خودکار می شکند و چیدمان را منظم نگه می دارد.
گالری تصاویر واکنش گرا
با «مدیا کوئری (Media Query)» می توان چیدمان را برای موبایل تغییر داد. روی صفحه بزرگ، چند ستون کن؛ روی صفحه کوچک، دوتا یا یکی.
گام های عملی
- یک ظرف با کلاس
galleryبساز. - برای هر تصویر یک
gallery-itemبساز. - برای تصویر
width:100%وheight:autoبگذار. - حاشیه و قاب ظریف تنظیم کن.
- در صورت نیاز، مدیا کوئری اضافه کن.
مطالب مرتبط: گالری تصاویر، طراحی واکنش گرا، منوهای کشویی.
جمع بندی سریع
- گالری یعنی چیدمان منظم چند تصویر.
- فلکس باکس، چینش را ساده می کند.
- تصویر باید کشسان و بدون اعوجاج باشد.
- واکنش گرا در موبایل حیاتی است.