I was looking for a function which would take the overall width, max height, min height parameters as the input and fit multiple images in the given overall width adjusting their width.
So for an example in this page , all the images (in same row) should get auto adjusted to the same height keeping their original aspect ratio with javascript changing their widths.
Edit: I have Answered
You need only to change the height of the picture. The aspect ratio remains.
function height100() {
var imgages = document.getElementsByTagName('img');
Array.prototype.forEach.call(imgages, function (a) {
a.style.height = '100px';
});
}<button onclick="height100();">100px height</button><br>
<img src="http://lorempixel.com/400/200/">
<img src="http://lorempixel.com/100/200/">
<img src="http://lorempixel.com/300/200/">
<img src="http://lorempixel.com/400/300/">
<img src="http://lorempixel.com/400/150/">
<img src="http://lorempixel.com/800/200/">
<img src="http://lorempixel.com/450/200/">
<img src="http://lorempixel.com/400/250/">
You dont necessarily need JS to accomplish this, unless your height is dynamic.
Flexbox should be able to take care of it for you.
Here is what you could do.
div {
border: 1px solid black;
display: flex;
flex-flow: row wrap;
}
img {
border: 1px solid red;
max-width: 100%;
height: 100px;
}<div>
<img src="http://lorempixel.com/400/200/">
<img src="http://lorempixel.com/100/200/">
<img src="http://lorempixel.com/300/200/">
<img src="http://lorempixel.com/400/300/">
<img src="http://lorempixel.com/400/150/">
<img src="http://lorempixel.com/800/200/">
<img src="http://lorempixel.com/450/200/">
<img src="http://lorempixel.com/400/250/">
</div>If you are looking for a dynamic height, just set the height at run time and could do something like this.
var imgs = document.querySelectorAll('img');
[].forEach.call(imgs, function(img) {
img.style.height = "100px";
});div {
border: 1px solid black;
display: flex;
flex-flow: row wrap;
}
img {
border: 1px solid red;
max-width: 100%;
}<div>
<img src="http://lorempixel.com/400/200/">
<img src="http://lorempixel.com/100/200/">
<img src="http://lorempixel.com/300/200/">
<img src="http://lorempixel.com/400/300/">
<img src="http://lorempixel.com/400/150/">
<img src="http://lorempixel.com/800/200/">
<img src="http://lorempixel.com/450/200/">
<img src="http://lorempixel.com/400/250/">
</div>
As stated in the other answers, it's a trivial job to adjust images to have the same height. Once you have scaled the images to have same height, according to their individual aspect ratio they will have different widths. Assuming that you have a certain width per row of images you might do as follows to distribute the images to the rows such that rows evenly get populated with the maximum amount of image and minimum white space.
function lineUpImages(imageWidths,totalWidth){
var sum = imageWidths.reduce((p,c) => p+c),
avg = sum/imageWidths.length;
initial = [...Array(Math.ceil(avg))].map(sa => (sa = [], sa.sum = 0, sa)); // initial rows array
return imageWidths.sort((a,b) => b-a)
.reduce((lines,image) => { var line = lines.reduce((p,c) => p.sum < c.sum ? p : c);
line.push(image);
line.sum += image;
return lines;
},initial);
}
var imageWidths = [...Array(20)].map(_ => ~~(Math.random()*4)+2), // generate a random array of image width values
result = lineUpImages(imageWidths,20); // maximum row width allowed is 20
console.log("Image Widths: :", JSON.stringify(imageWidths));
console.log("Rows:", JSON.stringify(result));You might also chain up a map instruction to the very end and shuffle the images in each row (shuffling the sub arrays).
The answer so that images are of constant height and fills the outer div.
The example here
The javscript here -
$(function(){
//var pics;
var pic1 = {height:"10", width:"20", ap:1.374, rh:0};
var pics = [pic1];
//pics.push(pic3);
//$('#test').html(pics[2].height);
$('#some').imagesLoaded(function() {
$('#test').html('test ');
$('#some img').each(function(index) {
//setting const height
$(this).height(150);
var apic = {height:$(this).height() , width: $(this).width() ,ap: $(this).width() / $(this).height() , rh:0};
pics.push(apic);
});
$('#test').append(pics.length+ '<br />');
for (var j=1; j <pics.length;j++) {
$('#test').append(pics[j].width + ' ' + pics[j].ap + '<br />');
}
$('#test').append('Calculating width ' + '<br />');
var set = [0];
for (var j=1; j <pics.length;j++) {
var t = 0;
var c = j
do {
t = t+ pics[c].width;
$('#test').append(c + ' ' + t+ '<br />');
c=c+1;
}while (t < 645 && c<pics.length);
c=c-1;
if(t>645) {
c = c -1;
}
set.push(c);
j = c;
}
$('#test').append('Sets are: <br />');
var v = 1;
var st = 0;
for (p = 1; p<set.length; p++) {
$('#test').append(set[p] + ' ');
st = v;
v = set[p];
$('#test').append(p + ': ');
var tot = 0;
var inc = 0;
while(tot < 645 ) {
var tot1=0;
for(var g = st; g<v+1; g ++) {
tot1 =tot1+ (pics[g].ap * (pics[g].height+inc));
}
tot=tot1;
inc = inc+1;
}
for(var g = st; g<v+1; g ++) {
$('#some img').eq(g-1).height ( 150 + inc);
}
$('#test').append( '<br / >');
v = v+1;
}
$('#test').append('<br />');
/*
var tot = 0
var wid;
var wid1;
var inc=0;
var r = 1;
for (r =1; r<pics.length-1; r++) {
inc = 0;
tot = 0;
while ( tot < 645) {
wid = pics[r].ap * (pics[r].height+inc);
wid1 = pics[r+1].ap * (pics[r+1].height+inc);
tot = wid + wid1;
inc = inc+ 1;
}
$('#test').append('Total ' + inc +' '+ wid + ' ' + wid1 + '<br />');
$('#some img').eq(r-1).height ( 150 + inc);
$('#some img').eq(r).height ( 150 + inc);
r=r+1;
*/
}
);
});
