Fitting multiple images in a given width
Fit images to width.

To make n images fit a width while keeping each image's aspect do the following.


Get the height that the images need to be to fit.


// images is an array of loaded images
// width is the width to fit
// returns the height images must be to fit.
function getFitSize(images,width){
    var totalWidth = 0;  // Holds the total aspect width
    // sum aspect for each image for total aspect width
    images.forEach(img=&gt;{
        totalWidth +=  img.width / img.height;
    })
    // then get height to fit the required width
    return width / totalWidth;  // the height for all to fit
}


var height = getFitSize(images,500); // fit images to 500 pixels across


With the height you just need to use that to scale the width by the aspect and set the height.


Size each image.


image.width = height * (image.width / image.height); // the image width that
                                                     // will fit
image.height = height;


Example

A Javascript example showing usage of above method. Images are loaded one at a time and made to fit the available page width.



const imageURLList = [ "https://upload.wikimedia.org/wikipedia/commons/thumb/5/52/Renaissance_Center%2C_Detroit%2C_Michigan_from_S_2014-12-07.jpg/380px-Renaissance_Center%2C_Detroit%2C_Michigan_from_S_2014-12-07.jpg",
"https://upload.wikimedia.org/wikipedia/commons/thumb/8/84/Paulus_Moreelse_-_Zelfportret.jpg/300px-Paulus_Moreelse_-_Zelfportret.jpg",
"https://upload.wikimedia.org/wikipedia/en/thumb/b/bb/Maull_%26_Fox_-_Fanny_Bullock_Workman.jpg/300px-Maull_%26_Fox_-_Fanny_Bullock_Workman.jpg",
"https://upload.wikimedia.org/wikipedia/commons/thumb/7/79/Toompea_loss_2014.jpg/380px-Toompea_loss_2014.jpg",
"https://upload.wikimedia.org/wikipedia/commons/thumb/b/bf/Winslow_Homer_-_The_Gulf_Stream_-_Metropolitan_Museum_of_Art.jpg/350px-Winslow_Homer_-_The_Gulf_Stream_-_Metropolitan_Museum_of_Art.jpg"
];
const images = [];
function getFitSize(images,width){
    var totalWidth = 0;  
    images.forEach(img=&gt;{ totalWidth +=  img.naturalWidth / img.naturalHeight })
    return width / totalWidth;  
}
// load images one at a time for effect only
function loadImage(){
    const image = new Image;
    image.src = imageURLList.shift();
    image.onload = function(){
        images.push(image);
        const width = imageContainer.getBoundingClientRect().width;
        const height = Math.floor(getFitSize(images,width));
        images.forEach(image =&gt; {
            image.style.width = Math.floor(height * (image.width / image.height)) + "px"; 
            image.style.height = height + "px";
        });
        imageContainer.appendChild(image);
        if(imageURLList.length &gt; 0){
            loadingInfo.textContent = "Loading image " + (images.length +1);  
            setTimeout(loadImage,2000);
        }else{
            loadingInfo.textContent = "Loading complete";
        }
    }
}
loadingInfo.textContent = "Loading image " + (images.length +1); 
setTimeout(loadImage,2000);
#imageContainer {width : 100%;}
body { font-family : arial; margin: 0px; overflow: hidden;}
.noEdge {margin: 0px;  padding : 0px; }
.atr { font-size : small; }
Fit images to width.&lt;span id="loadingInfo"&gt;&lt;/span&gt;
&lt;div class="noEdge" id = "imageContainer"&gt;&lt;/div&gt;
&lt;div class="atr"&gt;Images from &lt;a href="https://en.wikipedia.org/wiki/Wikipedia:Picture_of_the_day/January_2017"&gt;Wikipedia:Picture of the day/January 2017&lt;/a&gt;&lt;/div&gt;