Skip to main content

Forums

This topic contains 21 replies, has 4 voices, and was last updated by  bearhead 4 years, 8 months ago.

Viewing 15 posts - 1 through 15 (of 22 total)
  • Author
    Posts
  • #177736

    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

    #177737

    nixnerd
    Participant

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

    #177741

    Anonymous

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

    #177767

    nixnerd
    Participant

    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?

    #177778

    Paulie_D
    Moderator

    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.

    #177803

    Anonymous

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

    #177808

    Paulie_D
    Moderator

    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.

    #177812

    nixnerd
    Participant

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

    #177813

    nixnerd
    Participant

    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.

    #177818

    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.

    #177828

    nixnerd
    Participant

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

    #177830

    Anonymous

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

    #177886

    Paulie_D
    Moderator

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

    #177897

    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.

    #177901

    Paulie_D
    Moderator

    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.

icon-link icon-logo-star icon-search icon-star