CODEWITHSUNDEEP
javascriptjqueryhtmlcss
Tomatron
Tomatron

Reputation: 49

Responsive Images Gallery

Hopefully this will be a no brainer for someone. Essentially what I am trying to acheive is as follows.

Depending on the viewport width will depend on the amount of images shown, these images will always fill the space 100% but less images will be shown depending on the width.

HTML may be:

<div class="image">
            <img src="XXXX.jpg"/> 
</div>
<div class="image">
            <img src="XXXX.jpg"/> 
</div>
<div class="image">
            <img src="XXXX.jpg"/> 
</div>
<div class="image">
            <img src="XXXX.jpg"/> 
</div>
<div class="image">
            <img src="XXXX.jpg"/> 
</div>
<div class="image">
            <img src="XXXX.jpg"/> 
</div>
<div class="image">
            <img src="XXXX.jpg"/> 
</div>

So on a screen over 1200px we would display all images (on a single row) whereas on a screen of say 400px or less we would display only 2 images.

I guess there is a JS solution out there but I am relatively new to JS and cannot seem to find a solution that is understandable and relatable.

Thanks in advance

Upvotes: 1

Views: 86

Answers (3)

Rajesh Gajraj
Rajesh Gajraj

Reputation: 15

it is tested:

HTML:

<div class="image f_left">
        <img src="bill.png"/> 
</div>
<div class="image f_left">
        <img src="bill.png"/> 
</div>
<div class="image f_left">
        <img src="bill.png"/> 
</div>
<div class="image f_left">
        <img src="bill.png"/> 
</div>
<div class="image f_left">
        <img src="bill.png"/> 
</div>
<div class="image f_left">
        <img src="bill.png"/> 
</div>
<div class="image f_left">
        <img src="bill.png"/> 
</div>

CSS: must be

.f_left
{
    float:left;
    padding-bottom: 5%;
}
@media only screen and (max-width : 480px) {
     /* Smartphone view: 1 tile */
   .image{
       width: 100%;
    }
}
@media only screen and (max-width : 650px) and (min-width : 481px) {
     /* Tablet view: 2 tiles */
   .image {
       width: 50%;
    }
}
@media only screen and (max-width : 1050px) and (min-width : 651px) {
    /* Small desktop / ipad view: 3 tiles */
    .image {
        width: 33.3%;
    }
}
@media only screen and (max-width : 1290px) and (min-width : 1051px) {
     /* Medium desktop: 4 tiles */
     .image {
        width: 25%;
    }
}
@media only screen and (max-width : 1600px) and (min-width : 1291px) {
     /* Medium desktop: 4 tiles */
     .image {
        width: 20%;
     }
}

Upvotes: 0

Venkatesh K
Venkatesh K

Reputation: 66

No media Queries required

HTML

<div class="wrapper">    
<div class="image">
                <img src="XXXX.jpg"/> 
    </div>
    <div class="image">
                <img src="XXXX.jpg"/> 
    </div>
    <div class="image">
                <img src="XXXX.jpg"/> 
    </div>
    <div class="image">
                <img src="XXXX.jpg"/> 
    </div>
    <div class="image">
                <img src="XXXX.jpg"/> 
    </div>
    <div class="image">
                <img src="XXXX.jpg"/> 
    </div>
    <div class="image">
                <img src="XXXX.jpg"/> 
    </div>
</div>

CSS:

.wrapper{width:100%;overflow:hidden}
.wrapper .image{float:left;}

Upvotes: 1

Nutshell
Nutshell

Reputation: 8537

There's a CSS solution. You can use media queries to do that. 

@media (max-width: 400px){
    //your code
}

Upvotes: 1

Related Questions