DevStud DevStud - 2 years ago 134
jQuery Question

instagram style explore page image list with CSS

I am trying to make a instagram style explore page but i have one question here. I have created this DEMO from .

In this demo you can see the images. The images

is different not a same. I want to crop that images with CSS Like this DEMO page.

The difference between the first and second demo

First demo :

.exPex {
width: 100%;

Second Demo:

.exPex {
width: 200%;

So second demo working just in crome but this is not good idea i think. Anyone can tell me, How do I obtain the results of their second demo?

Answer Source

You could set the images up as background images and use background-size: cover; to get the effect that you're looking for (DEMO). This has the downside that your users will not be able to right-click or drag the images (to save them, etc.) as they might be expecting to do.

HTML for an example image:

<div class="_jjzlb" style="background-image:url('');">


._jjzlb {
    position: relative;
    padding-top: 100%;
    width: 100%;
    overflow: hidden;
    margin: 1px;

    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    background-size: cover;

    /* Optional centered background */
    background-position: center;

If this downside is not acceptable, you could also put hidden images on top of the backgrounds so that they will work like the user expects.

HTML for an example image with normal image mouse interactions:

<div class="_jjzlb" style="background-image: url('');">
    <img src="" class="exPex">

CSS to hide the image on top:

.exPex {
    position: absolute;
    display: block;
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
    width: 100%;
    height: 100%;

And here is a DEMO with the images, interacting with the user like you might expect them to.

Recommended from our users: Dynamic Network Monitoring from WhatsUp Gold from IPSwitch. Free Download