[Solved] Fluid And Responsive Image Gallery

[Anonymous]

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

[nixnerd]

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

[Anonymous]

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

[nixnerd]

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?

[Paulie_D]

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.

[Anonymous]

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

[Paulie_D]

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.

[nixnerd]

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!”

[nixnerd]

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.

[Anonymous]

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.

[nixnerd]

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

[Anonymous]

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

[Paulie_D]

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%.

http://codepen.io/Paulie-D/pen/mJiEc

[Anonymous]

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.

[Paulie_D]

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.

http://codepen.io/Paulie-D/pen/ygKin

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.

[Author]

Posts