- This topic is empty.
-
AuthorPosts
-
August 5, 2014 at 10:40 am #177736
Anonymous
InactiveThe 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
August 5, 2014 at 10:41 am #177737nixnerd
ParticipantHow are you setting the width of the images? What units are you using?
August 5, 2014 at 10:55 am #177741Anonymous
InactiveWhat do you mean? The images never change size. The image size are the actual size of the images.
August 5, 2014 at 11:53 am #177767nixnerd
ParticipantSo 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 #177778Paulie_D
MemberThe 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 #177803Anonymous
InactiveThats only the photoshop design. I haven’t actually replicated it with HTML,CSS,JS.
August 5, 2014 at 1:47 pm #177808Paulie_D
MemberHuh…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.
August 5, 2014 at 2:15 pm #177812nixnerd
ParticipantThat’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!”
August 5, 2014 at 2:17 pm #177813nixnerd
ParticipantI 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 likepx
for your gutters. That’s pretty much it.August 5, 2014 at 2:45 pm #177818Anonymous
InactiveIsn’t there a jquery plugin that does this? I would be very surprised if there isn’t. Ive looked and haven’t found one.
August 5, 2014 at 3:12 pm #177828nixnerd
ParticipantWhy use jQuery? It’s not that hard with CSS.
August 5, 2014 at 3:38 pm #177830Anonymous
InactiveFor 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 #177886Paulie_D
MemberAlthough 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 #177897Anonymous
InactiveI 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 #177901Paulie_D
MemberThe 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.
-
AuthorPosts
- The forum ‘Design’ is closed to new topics and replies.