0

I have a bunch of images that I'd like to display on a webpage. Each image has variable height and width. I'd like to display them in a row (that wraps to the next line depending on the width of the browser window) with a constant height but fixed aspect ratio to prevent skewing. How can I do this in pure CSS3/HTML without any plugins or JavaScript?

For example, images would be displayed as:

[1] [2] [3] [4]
[5] [6   ] [7 ]
[8     ] [9   ]
[10           ]

But if the browser width is increased:

[1] [2] [3] [4] [5] [6   ] 
[7 ][8     ] [9   ][10   ]

Each image would have a fixed height but the width could vary.

I've seen a bunch of masonry plugins that can do this, but is there a way to do this without any plugins? Also, most of the plugins that I've seen display the content vertically from top to bottom...I'm interested in keeping left-to-right order.

ensnare
  • 40,069
  • 64
  • 158
  • 224
  • It is possible with float, except I don't think you can "justify" the images to fill full width. – MightyPork Jul 13 '14 at 16:18
  • Either what @MightyPork said, or if you want to "justify" them you can just keep the images inline (no float) and use `text-align: justify;` on the container CSS? However what I assume you really want, is to have an even spacing around each image, for that you would need to crop the image, since there is no way to scale the image in proportion while keeping the same height and spacing around it? If this assumption is correct then I'll write a better example in answers. – Akurn Jul 13 '14 at 16:32

0 Answers0