- This topic is empty.
Viewing 9 posts - 1 through 9 (of 9 total)
Viewing 9 posts - 1 through 9 (of 9 total)
- The forum ‘CSS’ is closed to new topics and replies.
The forums ran from 2008-2020 and are now closed and viewable here as an archive.
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
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?
A static height doesn’t really make sense in this case. Shouldn’t it also be liquid?
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.
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
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.
You can use a neat little `padding-bottom` trick to maintain the ratios: http://codepen.io/ggilmore/pen/1c8ef2c4a773fcf14bbb54f62a57ab47
How can I get the liquid height to work with this?
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.