Grow your CSS skills. Land your dream job.

Liquid Image Showcase

  • # May 14, 2013 at 2:14 pm

    Could someone help me create this layout in css/html. If for any reason it is necessary to use Javascript to achieve this, that is OK as well.

    The image explains what I want to do.
    The major note here is that it’s liquid width. Keeping in mind that there is an image inside of each colored section, which the image just gets centers vertically and horizontally for each.

    http://jokermartini.com/myStuff/concept.jpg

    # May 14, 2013 at 2:28 pm

    There is nothing difficult here for the layout.

    Centering the images would be simple too but we’d need to know (ideally) the image dimensions or are they supposed to re-size too?

    # May 14, 2013 at 2:37 pm

    A static height doesn’t really make sense in this case. Shouldn’t it also be liquid?

    # May 14, 2013 at 2:38 pm

    The images do not have to resize. Just be centered.

    To be safe I would say the
    largest image size possible would be 800 by 360
    small images would be at their largest 400 by 180

    Those do not have to resize, but atleast be centered.

    # May 14, 2013 at 2:38 pm

    I was going to make it liquid height but i wasn’t sure how to do that. Ideally I’d rather that be liquid as well

    # May 14, 2013 at 2:42 pm

    Lets say that the height and width are all liquid.

    Make everything scale uniformly started from the max dimensions

    Full Showcase size: 1600 x 540
    Large image at full size: 800 x 540
    Small images at full size: 400 x 270

    All liquid and scale uniformly.
    That seems to make more sense.

    # May 14, 2013 at 2:42 pm

    You can use a neat little `padding-bottom` trick to maintain the ratios: http://codepen.io/ggilmore/pen/1c8ef2c4a773fcf14bbb54f62a57ab47

    # May 14, 2013 at 2:53 pm

    How can I get the liquid height to work with this?

    http://jsfiddle.net/JokerMartini/5KUZF/

    # May 14, 2013 at 4:29 pm

    Lets say that the height and width are all liquid.

    Make everything scale uniformly started from the max dimensions

    Full Showcase size: 1600 x 540 Large image at full size: 800 x 540 Small images at full size: 400 x 270

    All liquid and scale uniformly. That seems to make more sense.

Viewing 9 posts - 1 through 9 (of 9 total)

You must be logged in to reply to this topic.

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