Mosaic of images HTML/CSS

Question

I want to make an image layout with portrait images inside a div with a fixed aspect ratio of 3:2. The size of images is 327

Answer 1

Absolute positioning doesn't seem to be the best choice if you want to dynamically keep the same positions and ratio.

Native HTML flow is usually the way to go. Absolute positioning is like vitamin tablets. You use it when you need it, but it's not your main food. ;)

What I would do is :

1. simply position the container as wanted (centered for example) and size its width with percentage of the window/section it's in.

2. Then you put your ._pictures1-xx divs inside it, and size the pics' width using percentage of the container. Height will keep ratio automatically (*)

3. I would then make the ._pictures1-xx divs display "inline-block" and float "left". Then a little div with clear"both" after the last pic and close the container.

(*) reminder : the width or height default value is "auto", meaning any size that keeps the image ratio when the other is a px/% value. The horizontal margins natively become dynamic when your pics' height is defined, in order to keep your pics' ratios. If you define width and leave height auto, then the height is dynamic in order to keep the pics' ratio, and margins don't change.

I hope this was helpful.