It looks like I’ll land two small design jobs this week or next for folks in my art league. These sites will necessarily display a lot of images, and there’s an issue I don’t know how to resolve.
Here are some of the constraints:
1) It’ll be a fluid-width design (with some min- and max-widths for control).
2) The images will be similar in size but they WON”T all be the same width or height, so I don’t think pixel or percentage width units will work. (Landscape-oriented images will need to be wider than portrait-oriented ones.)
3) I want as many images on a row as the viewport width allows, with adequate horizontal separation. I figure there’ll be at least 3 images per row for narrow viewports, and maybe 5-8 for wide ones.
4) Each image will have some affiliated text below it (title, dimensions, price, etc.) that must move with the image when a different screen width causes the image to switch to another row.
I’ve gotten even spacing in a clunky way for fixed-width designs. I imagine fluid-width will use floats, but I don’t know how to get them evenly distributed horizontally.
TheLeggett: I’m definitely NOT supporting IE 6 or older. Other than IE, I’m figuring Firefox, Safari, and Chrome versions 1-3 years old is reasonable. I’m also 100% OK with Progressive Enhancement: producing a “good” baseline display for less-capable browsers, while making it better for newer, more capable browsers. I’ll probably use some CSS3 here and there for the newer browsers, mostly for visual enhancements.
cpj238: I really need to avoid a standard width. Several of the artists and photographers have works that are VERY wide and short, or VERY tall and narrow, and forcing a standard width display will look really odd and they won’t like it at all. (But if I did bite the bullet and enforce one standard width, I’d size the images in Photoshop, not CSS. I’d have more control over things, I believe Photoshop has a better resizing algorithm than browsers do, so I’d be able to use smaller image files and get better quality images.)
Not sure I understand how a max-height on the images will keep the image-details in place underneath.
Doesn’t sound like many newer solutions will work here, but I would have proposed some Flex Box solutions!
I understand that you take issue with resizing images, but I think it probably should be done (to an extent). Otherwise, the CSS solutions for what you described get quite limited with the amount of information being provided. The staggered look also doesn’t often look very good.