Question

我想在像图像一样的固定大小的同一div中显示多个图像。同一页面中会有多个div。 div的总大小不应超过屏幕的大小。

 function setupView(div, items, height, percentage) {
       //get the height for the div

       //var max_height = getPossibleHeight(div, items);
       if(percentage){

    $(div).css("height" , $(window).height() / 100 * height);
  } else
  $(div).css("height" , height+"px");



  $(div).css("line-height",0);

  //get the computed height and width
  const div_height = $(div).height();
  const div_width = $(div).width();




  //Calculate the side of each image
  const im_side = parseInt(getItemSize(div_width, div_height, items));

  var count;
  var dv =  $(div);
  for(count=0; count <= items; count++){

    dv.append("<img style='height: "+ im_side +"px;"+" width: "+ im_side+"px" +"' src='../images/done.png'/>");
  }

}
function getItemSize(x, y, n) {
  var px = Math.ceil(Math.sqrt(n*x/y));
  var sx,sy;
  if(Math.floor((px*y)/x)*px < n){
    sx = y/Math.ceil(px*y/x);
  } else{
    sx = x/px;
  }
  var py = Math.ceil(Math.sqrt((n*y)/x));
  if(Math.floor((py*x)/y)*py<n){
    sy = x/Math.ceil((x*py)/y);
  }
  else {
    sy = y/py;
  }
  // alert("X="+sx + " Y="+sy);
  // if(x>y)
  return (sx>sy) ? sx : sy;

}
$(function() {

  setupView(".panel-4",25000,"60",true);
  // setupView(".panel-5",9000);

  alert("Load complete!");

});

这就是现在正在发生的事情： Current Situation

我使用过提供的代码 C Code 我想调整图像的大小，使它们完全填满div而不留任何空间。

我试图在一个div中拟合多个图像

0 个答案: