Fill A Div Width 100% With Same Height Dynamic Width Images

I m having images of same height but of varied width. I was wondering if i can do something with css or js to fill the width of the container(parent div) with the images. For an e

Solution 1:

I don't think there will be any library available as per your requirement. But look at this, I have created a function such as gridWidth() for you. Maybe this can help you.

$.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>