Mosaic of images HTML/CSS -

i want make image layout portrait images inside div fixed aspect ratio of 3:2. size of images 327x491px.

the main issue unwanted spaces between images. how align images mosaic using html/css?

html :

<div id="pictures1" class="_pictures1 grid">     <div class="_pictures1-01"><div style="width:125px;height: 188px; background: red;"><img src="" width="125" height="188" alt="" /></div></div>     <div class="_pictures1-02"><div style="width:192px;height: 288px;background: green;"><img src="" width="192" height="288" alt="" /></div></div>      ... on ... </div>  

css :

._pictures1 {     width: 935px; height: 490px;     margin: -26px 0 0 59px;     float: left;     top: 20%; left: 20%;     position: absolute;     border: 1px gray solid; } ._pictures1 div {position: absolute;} ._pictures1-01 {top: 0px; left: 35px;} ._pictures1-02 {top: 200px; left: 0px;} /* ... on ... */ 

jsfiddle

to make proper answer, first going clarify requirements :

1. images have same aspect ratio : 3/2
2. images shouldn't cropped
3. no space between images
4. make mosaic of images

you can have thousands of possibilities display images. going make simple layout should show way build own.

here fancy fiddle of can achieve , here looks :

---

first step : think, calculate , think again

first : make simple let's images can have 3 sizes (i changed image size 1 px make calculations easier) :

1. big : 328*492px
2. medium, 1/2 of big : 164*246px
3. small, 1/4 of big : 82*123px

second : images portraits , container has same height big image, have work 492px heigh columns can have 3 widths :

1. big : 328px wide, can display size images
2. medium : 328/2 = 164px wide, can display medium , small images
3. small : 327/4 = 82px wide, can display small images

third : how many columns , image sizes? you, have make choice according total width of container , number of images want display.

but in fiddle, container (._pictures1) has 935px width impossible achieve column widths chosen before.

935/82 = 11.4024... 

the closest can 82*12 = 984px wide container.

you either have change width of container either change sizes of images , columns fit initial width.

---

or (spoiler) can work percentages, can alternative especialy if need layout responsive can become complicated , trying make things simple.

as sure curious , want check out, here example layout in a

responsive mosaic of image

---

next step : design layout

use pen, photoshop, or other tool suits you, if realy can use brain mentaly represent layout want.

i designed image can see @ bigininng of answer.

as said before there many layout posibilities (number of columns , sizes of images in columns) example chose 2 big columns 1 medium , 2 small ones

328*2+164+82*2 = 984px ( = width of container can fit!) 

---

last step : start coding!

you can see result in

fiddle

this layout based on floats need define in width, height of container, columns, images can fit next each other nicely (as have thought calculation , design, it's easy).

css :

#wrap {     width:984px;     height:492px; } .big_col, .medium_col, .small_col{     height:492px;     float:left; } img {     display:block;     margin:0;     padding:0;     border:none;     float:left; } .big_col {     width:328px; } .medium_col{     width:164px; } .small_col{     width:82px; } .big_img img {     width:328px;     height:493px } .medium_img img {     width:164px;     height:246px; } .small_img img {     width:82px;     height:123px; } 

then html markup:

<div id="wrap">     <div class="big_col">         <div class="small_img">             <img src="http://www.lorempixum.com/327/491/abstract" alt="" />             <img src="http://www.lorempixum.com/g/327/491" alt="" />             <img src="http://www.lorempixum.com/g/327/491/sports" alt="" />             <img src="http://www.lorempixum.com/327/491/nature" alt="" />         </div>         <div class="medium_img">             <img src="http://www.lorempixum.com/g/327/491/business" alt="" />             <img src="http://www.lorempixum.com/327/491/people" alt="" />         </div>         <div class="small_img">             <img src="http://www.lorempixum.com/g/327/491/food" alt="" />             <img src="http://www.lorempixum.com/327/491" alt="" />             <img src="http://www.lorempixum.com/327/491/cats" alt="" />             <img src="http://www.lorempixum.com/327/491/people" alt="" />         </div>     </div>     <div class="big_col">         <img src="http://www.lorempixum.com/327/491/nature" alt="" />     </div>     <div class="small_col small_img">         <img src="http://www.lorempixum.com/g/327/491/transport" alt="" />         <img src="http://www.lorempixum.com/g/327/491/sports" alt="" />         <img src="http://www.lorempixum.com/327/491/nature" alt="" />         <img src="http://www.lorempixum.com/g/327/491/sports" alt="" />     </div>     <div class="medium_col medium_img">             <img src="http://www.lorempixum.com/327/491/nightlife" alt="" />             <img src="http://www.lorempixum.com/g/327/491/transport" alt="" />     </div>     <div class="small_col small_img">             <img src="http://www.lorempixum.com/327/491/fashion" alt="" />             <img src="http://www.lorempixum.com/327/491/nature" alt="" />             <img src="http://www.lorempixum.com/g/327/491/sports" alt="" />             <img src="http://www.lorempixum.com/327/491" alt="" />     </div> </div>