用相同高度的动态宽度图像填充div宽度100％ [英] fill a div width 100% with same height dynamic width images

查看：105
本文介绍了用相同高度的动态宽度图像填充div宽度100％的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！

问题描述

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

我想知道我是否可以使用css或js来用图像填充容器(父div)的宽度.

例如，我已经制作了这个页面(链接)

现在，如果将第二行中的最后一张图像放置在第一行中，则可以看到它，那么很容易保存空白.

致谢

解决方案

我认为不会根据您的要求提供任何库. 但是看一下，我为您创建了一个函数，例如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>

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

解决方案

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>

这篇关于用相同高度的动态宽度图像填充div宽度100％的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！

查看全文
相关文章
前端开发最新文章
热门教程
热门工具
登录 关闭
扫码关注1秒登录
发送“验证码”获取 | 15天全站免登陆