Question

我正在寻找一个将整体宽度，最大高度，最小高度参数作为输入的函数，并在给定的整体宽度中调整多个图像来调整它们的宽度。

因此，对于此page中的示例，所有图像（同一行中的）都应自动调整到相同的高度，保持原始宽高比，javascript会更改其宽度。< / p>

修改：我已回答

Answer 1

您只需要更改图片的高度。纵横比仍然存在。

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/">

Answer 2

除非你的身高是动态的，否则你不一定需要JS才能做到这一点。

Flexbox应该能够为您照顾它。

这是你能做的。

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>

如果您正在寻找动态高度，只需在运行时设置高度，就可以这样做。

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>

Answer 3

正如其他答案中所述，将图像调整到相同的高度是一项微不足道的工作。一旦您将图像缩放到相同的高度，根据它们各自的宽高比，它们将具有不同的宽度。假设每行图像具有一定的宽度，您可以按照以下步骤将图像分布到行中，以便使用最大图像量和最小空白区域均匀地填充行。

＆＃13;

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));

＆＃13;

你也可能将一条地图指令链接到最后并将每行中的图像混洗（改组子数组）。

Answer 4

答案是图像高度恒定并填充外部div。

示例here

javscript在这里 -

$(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;
  */
}
);




 });

javascript算法自动适应多个图像

4 个答案: