021-28423015

گالری تصاویر در CSS

با استفاده از 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;
}
مشاهده مثال


 


نظر شما

لطفا نام و نام خانوادگی خود را وارد کنید
لطفا ایمیل خود را وارد کنید لطفا ایمیل صحیح وارد کنید.
لطفا متن نظر خود را وارد کنید
>

یادگیری CSS

مقالات و دروس

عضویت در خبرنامه شرکت نرم افزاری وب مهراز

برای اطلاع از بسته ها ، تخفیف های استثنایی و تازه های ما به خبرنامه وب مهراز بپیوندید.

لطفا شماره همراه صحیح وارد کنید.
لطفا ایمیل صحیح وارد کنید.

مقالات مرتبط