Forums

The forums ran from 2008-2020 and are now closed and viewable here as an archive.

Home Forums CSS Liquid Image Showcase

  • This topic is empty.
Viewing 9 posts - 1 through 9 (of 9 total)
  • Author
    Posts
  • #44771
    JokerMartini
    Participant

    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

    #135047
    Paulie_D
    Member

    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?

    #135048
    TheDoc
    Member

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

    #135049
    JokerMartini
    Participant

    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.

    #135050
    JokerMartini
    Participant

    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

    #135052
    JokerMartini
    Participant

    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.

    #135053
    TheDoc
    Member

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

    #135055
    JokerMartini
    Participant

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

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

    #135068
    JokerMartini
    Participant

    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)
  • The forum ‘CSS’ is closed to new topics and replies.