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

First of all, to remove space between images, just remove set to '0' padding and margin.

Then to achive what you want, you can use or combine those strategies:

1) Assign a fixed size in pixel to one of the sizes: other one will scale automatically.

2) You can calculate the size you need via javascript and assign the value dinamically. For example with jQuery framework:

$(img).each(function(){
 var h = this.height();
 var w = this.width();


 if (w => h){
  this.attr('width', w*0.66);
}
else {
  this.attr('height',h*.066);
}
});

3) You can use css background-image for divs and background-size: cover or background-size: contain as you need, statically or dinamically (w3c docs

Answer 2

In my experience: if you only set the dimension of either height or the width (not both) the image will scale accordingly.

Answer 3

img{
 height: auto;
 width: 50%
}

Answer 4

I would like to give simple solution.

You can simply wrap img tag with DIV. And you should apply CSS to this wrapped DIV.

Example Code

Instead of this

<img src='some_image.jpg'>

Use below kind of structure

<div class="img_wrapper">
     <img src='some_image.jpg'>
</div>

CSS

//  suggestion: target IMG with parent class / ID
.img_wrapper img{
    width: 100%; 
    height: auto;
} 

All images inside class .img_wrapper would have proper aspect ratio.