Grow your CSS skills. Land your dream job.

[Solved] Fluid And Responsive Image Gallery

  • # August 5, 2014 at 10:40 am

    The following image show an image gallery of movie covers. These images are within a fluid container meaning that when the browser is resized at any point, so is the container and therefore the images are repositioned too. The images are equally distant from each other both vertically and horizontally. The problem is that its not that easy keeping these images equidistant as the browser resizes, and having the first and last image in each row at the adge of the container is hard. So my question is, how do i achieve this? Is there a plugin that does this for me, or is there a simple method i’m not seeing?

    Image http://j-v.me/help.png

    NIX
    # August 5, 2014 at 10:41 am

    How are you setting the width of the images? What units are you using?

    # August 5, 2014 at 10:55 am

    What do you mean? The images never change size. The image size are the actual size of the images.

    NIX
    # August 5, 2014 at 11:53 am

    So that’s just one image then? It looks to me like it’s one big png. I’m not really sure what you’re asking.

    I assume you’re asking how to do this for real?

    # August 5, 2014 at 12:17 pm

    The following image show an image gallery of movie covers. These images are within a fluid container meaning that when the browser is resized at any point, so is the container and therefore the images are repositioned too.

    We need to see your HTML & CSS in order to help you, preferably in a Codepen.io demo.

    A image doesn’t help us help you.

    # August 5, 2014 at 1:12 pm

    Thats only the photoshop design. I haven’t actually replicated it with HTML,CSS,JS.

    # August 5, 2014 at 1:47 pm

    Huh…I was confused then…probably by this

    The problem is that its not that easy keeping these images equidistant as the browser resizes, and having the first and last image in each row at the edge of the container is hard.

    This would indicate that you’d tried something and couldn’t get it to work.

    NIX
    # August 5, 2014 at 2:15 pm

    That’s exactly what I thought. Until I right clicked and figured out it was a png.

    I was like: “Huh? It’s working just fine!”

    NIX
    # August 5, 2014 at 2:17 pm

    I gotta give it to @Paulie_D for showing me this last week. If I were you… I would use vw as your width and use an absolute unit like px for your gutters. That’s pretty much it.

    # August 5, 2014 at 2:45 pm

    Isn’t there a jquery plugin that does this? I would be very surprised if there isn’t. Ive looked and haven’t found one.

    NIX
    # August 5, 2014 at 3:12 pm

    Why use jQuery? It’s not that hard with CSS.

    # August 5, 2014 at 3:38 pm

    For IE9+ browser compatibility jQuery would seem like the right choice. Although how do you suggest i do it with CSS?

    # August 6, 2014 at 1:45 am

    Although how do you suggest i do it with CSS?

    It’s basic math really.

    You have, let’s say. 5 images you want in the row (initially) and, from the look of the image you provided, the space** between** them should be the same and, it looks like half that gap at either end.

    Anyway that’s a reasonable place to start.

    So your whole width is 100%. Let’s say you want each image to be 15% of the whole page wide…that’s 75% taken care of…leaving 25%.

    There will be 4 ‘whole’ gaps and 2 ‘half’ gaps making a total of…oh look, 5 gaps…that’s handy.

    The margin on either side of the image can then be 2.5%.

    # August 6, 2014 at 3:35 am

    I don’t want the images to change size at all. If if give the images a max-width they are no longer on the right edge of the container. The images shouldn’t change size in any way.

    # August 6, 2014 at 4:03 am

    The problem is that its not that easy keeping these images equidistant as the browser resizes, and having the first and last image in each row at the edge of the container is hard.

    So what are the images supposed to do when the browser resizes…what sort of flow do you want?

    Are you going for a fixed width container?

    Then it’s just different math.

    You know how wide your images are…let’s say 180px. You want 5 so, thats 900px.

    Say a container of 960px (for instance)…leaving 60px. 4 gaps (because you want them hard up on the edge) means a right margin on 15px on each except every 5th one.

    However, since you don’t want the images to re-size…this won’t be responsive. So you would have to use media queries for various browser sizes….but that’s not hard.

Viewing 15 posts - 1 through 15 (of 22 total)

You must be logged in to reply to this topic.

*May or may not contain any actual "CSS" or "Tricks".