Forums

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

Home Forums CSS CSS-only horizontally equidistant images Re: CSS-only horizontally equidistant images

#54381
TheLeggett
Member

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.

ie: http://i.imgur.com/2vVlt.png

Establishing a few constraints might help make the interface flow a little better. Of course, this is a bit subjective in nature, it could be that this effect is exactly what you need.

If you imposed a maximum height for instance, and made sure that each image filled at least this height, you could do something like this:

http://i.imgur.com/ZKwXl.png

(Tested in latest Fx, Chrome and IE)

Of course, there will probably be trouble in previous browser versions requiring a bit more work.

If you could use javascript, it would be a little more feasible to size images on the fly properly.