Question

我有相同高度但宽度不同的图像。

我想知道我是否可以用css或js做一些事情来用图像来填充容器（父div）的宽度。

我举了一个例子page(link)

现在可以看到第二行中的最后一张图像，如果放在第一行中，则可以轻松保存空白区域。

此致

Answer 1

我认为不会根据您的要求提供任何库。但是看一下，我为您创建了一个诸如gridWidth()之类的函数。也许这可以帮助您。

$.fn.gridWidth = function() {
  var container = this,
    c_width = container.width(),
    imgs = $('img', container),
    obj = {},
    new_obj = [],
    tmp_tw = 0;

  $.each(imgs, (i, v) => obj[i] = {"e": v, "w": $(v).outerWidth(true) });
  while (Object.keys(obj).length) {
    f = 0;
    var tmp_obj = Object.assign({}, obj);
    $.each(tmp_obj, function(i, v) {
      if ((tmp_tw + v.w) <= c_width) {
        tmp_tw += v.w;
        new_obj.push(v.e);
        delete obj[i];
        delete tmp_obj[i];
        f = 1;
      }
      if (tmp_tw >= c_width) return tmp_tw = 0;
    });
    if (!f) tmp_tw = 0;
  }
  $.each(new_obj, (i, v) => { $(v).css('order', i) });
};

$(window).on('load', function(){
    $('.img_container').gridWidth();
});
$(window).resize(function(){
    $('.img_container').gridWidth();
});

.img_container {
  border: 2px black solid;
  display: -webkit-box;
  display: -webkit-flex;
  display: -moz-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-flex-wrap: wrap;
  -ms-flex-wrap: wrap;
  flex-wrap: wrap;
  margin: 0 auto;
}

.img_container img {
  margin-bottom: 5px;
  margin-right: 5px;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="img_container">
  <img src="https://dummyimage.com/100x150/000000/ffffff&text=1">
  <img src="https://dummyimage.com/150x150/0000FF/ffffff&text=2">
  <img src="https://dummyimage.com/200x150/EA00FF/ffffff&text=3">
  <img src="https://dummyimage.com/250x150/FF0000/ffffff&text=4">
  <img src="https://dummyimage.com/300x150/00D5FF/ffffff&text=5">
  <img src="https://dummyimage.com/350x150/26FF00/ffffff&text=6">
  <img src="https://dummyimage.com/300x150/FF8400/ffffff&text=7">
  <img src="https://dummyimage.com/250x150/000000/ffffff&text=8">
  <img src="https://dummyimage.com/200x150/0000FF/ffffff&text=9">
  <img src="https://dummyimage.com/150x150/EA00FF/ffffff&text=10">
  <img src="https://dummyimage.com/100x150/FF0000/ffffff&text=11">
  <img src="https://dummyimage.com/100x150/00D5FF/ffffff&text=12">
  <img src="https://dummyimage.com/150x150/26FF00/ffffff&text=13">
  <img src="https://dummyimage.com/200x150/FF8400/ffffff&text=14">
  <img src="https://dummyimage.com/250x150/000000/ffffff&text=15">
  <img src="https://dummyimage.com/300x150/0000FF/ffffff&text=16">
  <img src="https://dummyimage.com/350x150/EA00FF/ffffff&text=17">
  <img src="https://dummyimage.com/300x150/FF0000/ffffff&text=18">
  <img src="https://dummyimage.com/250x150/00D5FF/ffffff&text=19">
  <img src="https://dummyimage.com/200x150/26FF00/ffffff&text=20">
  <img src="https://dummyimage.com/150x150/FF8400/ffffff&text=21">
  <img src="https://dummyimage.com/100x150/000000/ffffff&text=22">
  <img src="https://dummyimage.com/100x150/0000FF/ffffff&text=23">
  <img src="https://dummyimage.com/150x150/EA00FF/ffffff&text=24">
  <img src="https://dummyimage.com/200x150/FF0000/ffffff&text=25">
  <img src="https://dummyimage.com/250x150/00D5FF/ffffff&text=26">
  <img src="https://dummyimage.com/300x150/26FF00/ffffff&text=27">
  <img src="https://dummyimage.com/350x150/FF8400/ffffff&text=28">
  <img src="https://dummyimage.com/300x150/000000/ffffff&text=29">
  <img src="https://dummyimage.com/250x150/0000FF/ffffff&text=30">
  <img src="https://dummyimage.com/200x150/EA00FF/ffffff&text=31">
  <img src="https://dummyimage.com/150x150/FF0000/ffffff&text=32">
  <img src="https://dummyimage.com/100x150/00D5FF/ffffff&text=33">
  <img src="https://dummyimage.com/100x150/26FF00/ffffff&text=34">
  <img src="https://dummyimage.com/100x150/FF8400/ffffff&text=35">
  <img src="https://dummyimage.com/150x150/000000/ffffff&text=36">
</div>

使用相同高度的动态宽度图像填充div宽度100％

1 个答案: