动态地调整n个图像的行，所有5行的高度一致 [英] Dynamically re-size the rows for n-number of images, with all 5 rows consistent height

查看：111
本文介绍了动态地调整n个图像的行，所有5行的高度一致的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！

问题描述



现在，我一直在寻找的是


  1. 所有5行必须具有相同的高度，尽管其中包含图像容器数量。

  2. 5图像容器，第二行具有3个第三行，分别具有6个图像容器，但它们应当具有相等的高度，在任何分辨率

  3. 任何数量的图像（不同的高度和宽度），但他们应该在图像容器与图像对齐到顶部，而不是中心，以帮助缓解锯齿状。

  4. 所有图像有不同宽度和高度，因此当放置在图像容器中时，其宽高比保持不变。

  5. 宽度取决于其中的图片容器数量，例如第一行中的20个图片容器的长度应该比第二行中的图片容器多10个。

html代码 

 身体> 
< div> new< / div> 
< div class =outer-wrap-img> 
< div class =inner-wrap-img> 
< div class =red> 
<！ - <！ - < img src =http://www.gettyimages.ca/gi-resources/images/Homepage/Category-Creative/UK/UK_Creative_462809583.jpg/> ;  - 
< / div> 
< / div> 
 
< div class =inner-wrap-img> 
< div class =green> 
<！ - <！ - < img src =http://www.gettyimages.com/gi-resources/images/CreativeImages/Hero-527920799.jpg/>  - > ; 
< / div> 
< / div> 
 
< div class =inner-wrap-img> 
< div class =red> 
<！ - < img src =http://www.gettyimages.ca/gi-resources/images/Homepage/Category-Creative/UK/UK_Creative_462809583.jpg/>  - > 
< / div> 
< / div> 
 
< div class =inner-wrap-img> 
< div class =green> 
<！ - < img src =http://www.gettyimages.com/gi-resources/images/CreativeImages/Hero-527920799.jpg/>  - > 
< / div> 
< / div> 
 
< / div> 
 
 
<！ - 第2行 - > 
< div> old< / div> 
< div class =outer-wrap-img> 
< div class =inner-wrap-img> 
< div class =red> 
<！ - < img src =http://www.gettyimages.ca/gi-resources/images/Homepage/Category-Creative/UK/UK_Creative_462809583.jpg/>  - > 
< / div> 
< / div> 
 
< div class =inner-wrap-img> 
< div class =green> 
<！ - < img src =http://www.gettyimages.com/gi-resources/images/CreativeImages/Hero-527920799.jpg/>  - > 
< / div> 
< / div> 
 
< div class =inner-wrap-img> 
< div class =red> 
<！ - < img src =http://www.gettyimages.ca/gi-resources/images/Homepage/Category-Creative/UK/UK_Creative_462809583.jpg/>  - > 
< / div> 
< / div> 
 
< div class =inner-wrap-img> 
< div class =green> 
< ;!  - < img src =http://www.gettyimages.com/gi-resources/images/CreativeImages/Hero-527920799.jpg/>  - > 
< / div> 
< / div> 
< div class =inner-wrap-img> 
< div class =red><！ - < img src =http://www.gettyimages.ca/gi-resources/images/Homepage/Category-Creative/UK/UK_Creative_462809583 .jpg/>  - > 
< / div> 
< / div> 
 
< div class =inner-wrap-img> 
< div class =green> 
<！ - < img src =http://www.gettyimages.com/gi-resources/images/CreativeImages/Hero-527920799.jpg/>  - > 
< / div> 
< / div> 
 
< div class =inner-wrap-img> 
< div class =red><！ - < img src =http://www.gettyimages.ca/gi-resources/images/Homepage/Category-Creative/UK/UK_Creative_462809583 .jpg/>  - > 
< / div> 
< / div> 
 
< div class =inner-wrap-img> 
< div class =green> 
<！ - < img src =http://www.gettyimages.com/gi-resources/images/CreativeImages/Hero-527920799.jpg/>  - > 
< / div> 
< / div> 
 
< / div> 
<！ -  3rd  - > 
< div>中级< / div> 
< div class =outer-wrap-img> 
< div class =inner-wrap-img> 
< div class =red> 
<！ - < img src =http://www.gettyimages.ca/gi-resources/images/Homepage/Category-Creative/UK/UK_Creative_462809583.jpg/>  - > 
< / div> 
< / div> 
 
< div class =inner-wrap-img> 
< div class =green> 
<！ - < img src =http://www.gettyimages.com/gi-resources/images/CreativeImages/Hero-527920799.jpg/>  - > 
< / div> 
< / div> 
 
< div class =inner-wrap-img> 
< div class =red> 
<！ - < img src =http://www.gettyimages.ca/gi-resources/images/Homepage/Category-Creative/UK/UK_Creative_462809583.jpg/>  - > 
< / div> 
< / div> 
 
< div class =inner-wrap-img> 
< div class =green> 
<！ - < img src =http://www.gettyimages.com/gi-resources/images/CreativeImages/Hero-527920799.jpg/>  - > 
< / div> 
< / div> 
 
 
< div class =inner-wrap-img> 
< div class =red><！ - < img src =http://www.gettyimages.ca/gi-resources/images/Homepage/Category-Creative/UK/UK_Creative_462809583 .jpg/>  - > 
< / div> 
< / div> 
 
< div class =inner-wrap-img> 
< div class =green> 
<！ - < img src =http://www.gettyimages.com/gi-resources/images/CreativeImages/Hero-527920799.jpg/>  - > 
< / div> 
< / div> 
< div class =inner-wrap-img> 
< div class =red><！ - < img src =http://www.gettyimages.ca/gi-resources/images/Homepage/Category-Creative/UK/UK_Creative_462809583 .jpg/>  - > 
< / div> 
< / div> 
< / div> 
<！ -  4th  - > 
< div> old< / div> 
< div class =outer-wrap-img> 
< div class =inner-wrap-img> 
< div class =red> 
<！ - < img src =http://www.gettyimages.ca/gi-resources/images/Homepage/Category-Creative/UK/UK_Creative_462809583.jpg/>  - > 
< / div> 
< / div> 
 
< div class =inner-wrap-img> 
< div class =green> 
<！ - < img src =http://www.gettyimages.com/gi-resources/images/CreativeImages/Hero-527920799.jpg/>  - > 
< / div> 
< / div> 
 
< div class =inner-wrap-img> 
< div class =red> 
<！ - < img src =http://www.gettyimages.ca/gi-resources/images/Homepage/Category-Creative/UK/UK_Creative_462809583.jpg/>  - > 
< / div> 
< / div> 
 
< div class =inner-wrap-img> 
< div class =green> 
<！ - < img src =http://www.gettyimages.com/gi-resources/images/CreativeImages/Hero-527920799.jpg/>  - > 
< / div> 
< / div> 
< div class =inner-wrap-img> 
< div class =red><！ - < img src =http://www.gettyimages.ca/gi-resources/images/Homepage/Category-Creative/UK/UK_Creative_462809583 .jpg/>  - > 
< / div> 
< / div> 
 
< div class =inner-wrap-img> 
< div class =green> 
<！ - < img src =http://www.gettyimages.com/gi-resources/images/CreativeImages/Hero-527920799.jpg/>  - > 
< / div> 
< / div> 
 
< div class =inner-wrap-img> 
< div class =red><！ - < img src =http://www.gettyimages.ca/gi-resources/images/Homepage/Category-Creative/UK/UK_Creative_462809583 .jpg/>  - > 
< / div> 
< / div> 
 
< div class =inner-wrap-img> 
< div class =green> 
<！ - < img src =http://www.gettyimages.com/gi-resources/images/CreativeImages/Hero-527920799.jpg/>  - > 
< / div> 
< / div> 
< div class =inner-wrap-img> 
< div class =red><！ - < img src =http://www.gettyimages.ca/gi-resources/images/Homepage/Category-Creative/UK/UK_Creative_462809583 .jpg/>  - > 
< / div> 
< / div> 
< / div> 
<！ -  5th  - > 
< div> oldest< / div> 
< div class =outer-wrap-img> 
< div class =inner-wrap-img> 
< div class =red> 
<！ - < img src =http://www.gettyimages.ca/gi-resources/images/Homepage/Category-Creative/UK/UK_Creative_462809583.jpg/>  - > 
< / div> 
< / div> 
 
< div class =inner-wrap-img> 
< div class =green> 
<！ - < img src =http://www.gettyimages.com/gi-resources/images/CreativeImages/Hero-527920799.jpg/>  - > 
< / div> 
< / div> 
 
< div class =inner-wrap-img> 
< div class =red> 
<！ - < img src =http://www.gettyimages.ca/gi-resources/images/Homepage/Category-Creative/UK/UK_Creative_462809583.jpg/>  - > 
< / div> 
< / div> 
 
< div class =inner-wrap-img> 
< div class =green> 
<！ - < img src =http://www.gettyimages.com/gi-resources/images/CreativeImages/Hero-527920799.jpg/>  - > 
< / div> 
< / div> 
< div class =inner-wrap-img> 
< div class =red><！ - < img src =http://www.gettyimages.ca/gi-resources/images/Homepage/Category-Creative/UK/UK_Creative_462809583 .jpg/>  - > 
< / div> 
< / div> 
 
< div class =inner-wrap-img> 
< div class =green> 
<！ - < img src =http://www.gettyimages.com/gi-resources/images/CreativeImages/Hero-527920799.jpg/>  - > 
< / div> 
< / div> 
 
< div class =inner-wrap-img> 
< div class =red><！ - < img src =http://www.gettyimages.ca/gi-resources/images/Homepage/Category-Creative/UK/UK_Creative_462809583 .jpg/>  - > 
< / div> 
< / div> 
 
< div class =inner-wrap-img> 
< div class =green> 
<！ - < img src =http://www.gettyimages.com/gi-resources/images/CreativeImages/Hero-527920799.jpg/>  - > 
< / div> 
< / div> 
 
< / div>

css 

  .outer-wrap-img {
 display：table; 
 table-layout：fixed; 
 width：100％; 
} 
 .inner-wrap-img {
 display：table-cell; 
 padding：2px; 
} 
 .inner-wrap-img div {
 padding-bottom：75％; 
 position：relative; 
} 
 .inner-wrap-img div img {
 display：block; 
 max-width：100％; 
 max-height：100％; 
 position：absolute; 
} 
 .red {
 / * background：＃F00; * / 
 background-color：#CCC 
} 
 .green {
 / * background：＃0f0; * / 
 background-color：#CCC 
}


$ b b

小提示示例

解决方案

因为你没有提供任何Javascript，我会为你写一些伪代码。

  function doResize（）{
 // for each parent div 
 resize（parent div，images in div）; 
} 
 
 function resize（parent，images）{
 var imageHeight = parentheight / image number; 
 //将图片调整为imageheight 
}


I have five rows with images in a containers placed inside a container for each row .

Now, what i have been looking is

  1. All 5 rows must be same height, in-spite of number of image containers in it.
  2. For example first row has 5 image container and second row has 3 third row has 6 image containers respectively, still they should be of equal height, in any resolution
  3. Here one row can have any number of images (different height and width) , but they should be in the image container with images align to the top, instead of center to help ease the jaggedness.
  4. All images have different width and height, so while placed in image container their aspect ratio kept.
  5. The width of depends on number of image containers in it, like 20 in first row should be wider in length , than 10 image containers in second row.

html code

<body>
<div>new</div>
<div class="outer-wrap-img">
  <div class="inner-wrap-img">
    <div class="red">
      <!--<!--<img src="http://www.gettyimages.ca/gi-resources/images/Homepage/Category-Creative/UK/UK_Creative_462809583.jpg" />-->
    </div>
  </div>

  <div class="inner-wrap-img">
    <div class="green">
      <!--<!--<img src="http://www.gettyimages.com/gi-resources/images/CreativeImages/Hero-527920799.jpg" />-->
    </div>
  </div>

  <div class="inner-wrap-img">
    <div class="red">
      <!--<img src="http://www.gettyimages.ca/gi-resources/images/Homepage/Category-Creative/UK/UK_Creative_462809583.jpg" />-->
    </div>
  </div>

  <div class="inner-wrap-img">
    <div class="green">
      <!--<img src="http://www.gettyimages.com/gi-resources/images/CreativeImages/Hero-527920799.jpg" />-->
    </div>
  </div>

</div>


<!--2nd row-->
<div>old</div>
<div class="outer-wrap-img">
  <div class="inner-wrap-img">
    <div class="red">
      <!--<img src="http://www.gettyimages.ca/gi-resources/images/Homepage/Category-Creative/UK/UK_Creative_462809583.jpg" />-->
    </div>
  </div>

  <div class="inner-wrap-img">
    <div class="green">
      <!--<img src="http://www.gettyimages.com/gi-resources/images/CreativeImages/Hero-527920799.jpg" />-->
</div>
  </div>

  <div class="inner-wrap-img">
    <div class="red">
      <!--<img src="http://www.gettyimages.ca/gi-resources/images/Homepage/Category-Creative/UK/UK_Creative_462809583.jpg" />-->
    </div>
  </div>

  <div class="inner-wrap-img">
    <div class="green">
      <!--<img src="http://www.gettyimages.com/gi-resources/images/CreativeImages/Hero-527920799.jpg" />-->
</div>
  </div>
  <div class="inner-wrap-img">
    <div class="red"><!--<img src="http://www.gettyimages.ca/gi-resources/images/Homepage/Category-Creative/UK/UK_Creative_462809583.jpg" />-->
    </div>
  </div>

  <div class="inner-wrap-img">
    <div class="green">
      <!--<img src="http://www.gettyimages.com/gi-resources/images/CreativeImages/Hero-527920799.jpg" />-->
</div>
  </div>

  <div class="inner-wrap-img">
    <div class="red"><!--<img src="http://www.gettyimages.ca/gi-resources/images/Homepage/Category-Creative/UK/UK_Creative_462809583.jpg" />-->
    </div>
  </div>

  <div class="inner-wrap-img">
    <div class="green">
      <!--<img src="http://www.gettyimages.com/gi-resources/images/CreativeImages/Hero-527920799.jpg" />-->
</div>
  </div>

</div>
<!--3rd-->
<div>mid-level</div>
<div class="outer-wrap-img">
  <div class="inner-wrap-img">
    <div class="red">
      <!--<img src="http://www.gettyimages.ca/gi-resources/images/Homepage/Category-Creative/UK/UK_Creative_462809583.jpg" />-->
    </div>
  </div>

  <div class="inner-wrap-img">
    <div class="green">
      <!--<img src="http://www.gettyimages.com/gi-resources/images/CreativeImages/Hero-527920799.jpg" />-->
</div>
  </div>

  <div class="inner-wrap-img">
    <div class="red">
     <!--<img src="http://www.gettyimages.ca/gi-resources/images/Homepage/Category-Creative/UK/UK_Creative_462809583.jpg" />-->
    </div>
  </div>

  <div class="inner-wrap-img">
    <div class="green">
      <!--<img src="http://www.gettyimages.com/gi-resources/images/CreativeImages/Hero-527920799.jpg" />-->
</div>
  </div>


  <div class="inner-wrap-img">
    <div class="red"><!--<img src="http://www.gettyimages.ca/gi-resources/images/Homepage/Category-Creative/UK/UK_Creative_462809583.jpg" />-->
    </div>
  </div>

  <div class="inner-wrap-img">
    <div class="green">
      <!--<img src="http://www.gettyimages.com/gi-resources/images/CreativeImages/Hero-527920799.jpg" />-->
</div>
  </div>
   <div class="inner-wrap-img">
    <div class="red"><!--<img src="http://www.gettyimages.ca/gi-resources/images/Homepage/Category-Creative/UK/UK_Creative_462809583.jpg" />-->
    </div>
  </div>
</div>
<!-- 4th-->
<div>older</div>
<div class="outer-wrap-img">
  <div class="inner-wrap-img">
    <div class="red">
      <!--<img src="http://www.gettyimages.ca/gi-resources/images/Homepage/Category-Creative/UK/UK_Creative_462809583.jpg" />-->
    </div>
  </div>

  <div class="inner-wrap-img">
    <div class="green">
     <!--<img src="http://www.gettyimages.com/gi-resources/images/CreativeImages/Hero-527920799.jpg" />-->
</div>
  </div>

  <div class="inner-wrap-img">
    <div class="red">
      <!--<img src="http://www.gettyimages.ca/gi-resources/images/Homepage/Category-Creative/UK/UK_Creative_462809583.jpg" />-->
    </div>
  </div>

  <div class="inner-wrap-img">
    <div class="green">
      <!--<img src="http://www.gettyimages.com/gi-resources/images/CreativeImages/Hero-527920799.jpg" />-->
</div>
  </div>
  <div class="inner-wrap-img">
    <div class="red"><!--<img src="http://www.gettyimages.ca/gi-resources/images/Homepage/Category-Creative/UK/UK_Creative_462809583.jpg" />-->
    </div>
  </div>

  <div class="inner-wrap-img">
    <div class="green">
      <!--<img src="http://www.gettyimages.com/gi-resources/images/CreativeImages/Hero-527920799.jpg" />-->
</div>
  </div>

  <div class="inner-wrap-img">
    <div class="red"><!--<img src="http://www.gettyimages.ca/gi-resources/images/Homepage/Category-Creative/UK/UK_Creative_462809583.jpg" />-->
    </div>
  </div>

  <div class="inner-wrap-img">
    <div class="green">
      <!--<img src="http://www.gettyimages.com/gi-resources/images/CreativeImages/Hero-527920799.jpg" />-->
</div>
  </div>
   <div class="inner-wrap-img">
    <div class="red"><!--<img src="http://www.gettyimages.ca/gi-resources/images/Homepage/Category-Creative/UK/UK_Creative_462809583.jpg" />-->
    </div>
  </div>
</div>
<!-- 5th-->
<div>oldest</div>
<div class="outer-wrap-img">
  <div class="inner-wrap-img">
    <div class="red">
      <!--<img src="http://www.gettyimages.ca/gi-resources/images/Homepage/Category-Creative/UK/UK_Creative_462809583.jpg" />-->
    </div>
  </div>

  <div class="inner-wrap-img">
    <div class="green">
      <!--<img src="http://www.gettyimages.com/gi-resources/images/CreativeImages/Hero-527920799.jpg" />-->
</div>
  </div>

  <div class="inner-wrap-img">
    <div class="red">
     <!--<img src="http://www.gettyimages.ca/gi-resources/images/Homepage/Category-Creative/UK/UK_Creative_462809583.jpg" />-->
    </div>
  </div>

  <div class="inner-wrap-img">
    <div class="green">
      <!--<img src="http://www.gettyimages.com/gi-resources/images/CreativeImages/Hero-527920799.jpg" />-->
</div>
  </div>
  <div class="inner-wrap-img">
    <div class="red"><!--<img src="http://www.gettyimages.ca/gi-resources/images/Homepage/Category-Creative/UK/UK_Creative_462809583.jpg" />-->
    </div>
  </div>

  <div class="inner-wrap-img">
    <div class="green">
      <!--<img src="http://www.gettyimages.com/gi-resources/images/CreativeImages/Hero-527920799.jpg" />-->
</div>
  </div>

  <div class="inner-wrap-img">
    <div class="red"><!--<img src="http://www.gettyimages.ca/gi-resources/images/Homepage/Category-Creative/UK/UK_Creative_462809583.jpg" />-->
    </div>
  </div>

  <div class="inner-wrap-img">
    <div class="green">
      <!--<img src="http://www.gettyimages.com/gi-resources/images/CreativeImages/Hero-527920799.jpg" />-->
</div>
  </div>

</div>

css 

.outer-wrap-img {
  display: table;
  table-layout: fixed;
  width: 100%;
}
.inner-wrap-img {
  display: table-cell;
  padding: 2px;
}
.inner-wrap-img div {
  padding-bottom: 75%;
  position: relative;
}
.inner-wrap-img div img {
  display: block;
  max-width: 100%;
  max-height: 100%;
  position: absolute;
}
.red {
 /* background: #F00;*/
  background-color:#CCC
}
.green {
  /*background: #0f0;*/
  background-color:#CCC
}

Fiddle sample

解决方案

Since you haven't provided any Javascript, I'll write some pseudo-code for you

function doResize(){
   //for each parent div
      resize(parent div, images in div);
}

function resize(parent, images){
    var imageHeight = parentheight / image number;
    //adjust images to imageheight
}

这篇关于动态地调整n个图像的行，所有5行的高度一致的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！

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