饲养图像宽高比的分割

Question

我有div的n个的分割，其由不同大小的图像的：

<div> 
<div> <img ng-src="{{backgroundImage}}" /> </div> 
<div> <img ng-src="{{backgroundImage}}" /> </div> 
<div> <img ng-src="{{backgroundImage}}" /> </div> 
<div> <img ng-src="{{backgroundImage}}" /> </div> 
<div> <img ng-src="{{backgroundImage}}" /> </div> 
<!-- dynamically the images will be loaded --> 
</div> 

我寻找的功能是：

• 无论图像的数量如何，它们都必须在一行中流动，这意味着如果有大量图像，它们应该重新调整大小以适合较小的图像。

• 的图像纵横比必须保持在重新调整大小

• 在div应该是全部相等的宽度和高度上尺寸调整

• 什么其实我喜欢的是对每个图像在与所有其他图像一致的正方形内对齐。每张图片应该在自己的正方形内进行约束和重新调整大小。然后，我希望所有包含正方形的大小都在整行上排列。随着图像数量的增加，正方形的大小相应减小。

我已经尝试和搜索了很多解决方案，但没有任何工作。请用我上面提到的功能来演示一些真实的例子。

Answer 1

你可以尝试这样的事情，虽然它需要额外的div：

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

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

Answer 2

这应该满足您的要求。设置总数没有。将图像转换为变量imageCount，代码将相应地进行计算。现在我已经给出背景红色。您可以设置图片的网址，当您使用

var imageCount = 27; 
 

 
    var width = window.innerWidth; 
 
    var divWidth = width/imageCount; 
 
    var html = ""; 
 
    for(var i=0;i<imageCount;i++) 
 
    { 
 
     html+= "<div style='float:left; width: "+divWidth +"px;height: "+divWidth +"px;background: red; background-size:100% 100%'></div>"; 
 
    } 
 
    document.getElementById("images").innerHTML = html;

*{ 
 
     padding: 0; 
 
     margin: 0; 
 
    }

<div id="images"> 
 

 
</div>

Answer 3

使用Flexbox的，或者，你可以使用一个表。

Answer 4

我宁愿使用纯CSS和HTML，这样的事情：

<div class="ratio-16-9"> 
    <img src="http://www.w3schools.com/html/pic_mountain.jpg" alt="Mountain View"> 
</div> 

<style> 
    .ratio-16-9, 
    .ratio-12-9, 
    .ratio-1-1 { 
     display: block; 
     position: relative; 
     height: 0; 
     overflow: hidden; 
     padding-bottom: 56.25%; 
    } 

    .ratio-16-9 img, 
    .ratio-12-9 img, 
    .ratio-1-1 img { 
     position: absolute; 
     top: 0; 
     left: 0; 
     width: 100%; 
    } 

    .ratio-1-1 { 
     padding-bottom: 100%; 
    } 

    .ratio-12-9 { 
     padding-bottom: 73.47%; 
    } 
</style>