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

Question

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

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

例如，我制作了这个页面（链接）

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

问候

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 + 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>