گالری تصاویر در CSS
یادگیری CSS
تعداد بازدید :
3412
تاریخ و ساعت انتشار :
چهار شنبه 1 شهریور 1396 01:57
با استفاده از CSS می توان گالری تصاویر ایجاد کرد.
گالری تصاویر
در مثال زیر نحوه ایجاد گالری تصاویر با استفاده از CSS نمایش داده شده است.
مثال :
گالری تصاویر
div.img {
margin: 5px;
border: 1px solid #ccc;
float: left;
width: 180px;
}
div.img:hover {
border: 1px solid #777;
}
div.img img {
width: 100%;
height: auto;
}
div.desc {
padding: 15px;
text-align: center;
}
مشاهده مثالگالری تصاویر واکنش گرا
در مثال زیر چگونگی ایجاد گالری تصاویر واکنش گرا با استفاده از CSS3 نمایش داده شده است.
مثال :
گالری تصاویر واکنش گرا
.responsive {
padding: 0 6px;
float: left;
width: 24.99999%;
}
@media only screen and (max-width: 700px){
.responsive {
width: 49.99999%;
margin: 6px 0;
}
}
@media only screen and (max-width: 500px){
.responsive {
width: 100%;
}
}
.clearfix:after {
content: "";
display: table;
clear: both;
}
مشاهده مثال
نظر شما
>