fill a div width 100% with same height dynamic width images

Question

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 example I have made this page(link)

Now as one can see the last image in the second row if its placed in the first then easily the blank spaces can be saved.

Regards

Answer 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 + vw) <= c_width) { tmp_tw += vw; new_obj.push(ve); 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>