Javascript 在分区中保持图像纵横比

我有一个包含n个div的分区，由不同大小的图像组成：

<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的宽度和高度应相同

• 我真正想要的是，每个图像在一个正方形内对齐，该正方形的大小与所有其他图像的大小一致。每个图像都应该在各自的正方形内进行约束和重新调整大小。然后，我希望所有包含的方块都在整行中调整大小。因此，随着图像数量的增加，正方形的大小也相应减小

---

我已经尝试了很多，寻找了很多解决方案，但都没有成功。请用我上面提到的功能演示一些真实的例子

这应该满足您的要求。将图像总数设置为可变imageCount，代码将相应计算。现在我已经给了背景红色。您可以在使用时设置图像url

var-imageCount=27；
变量宽度=window.innerWidth；
var divWidth=宽度/图像计数；
var html=“”；
对于（var i=0；i使用flexbox，或者，您可以使用一个表。
我更喜欢使用纯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>


.比率-16-9，
.比率-12-9，
.比率-1-1{
显示：块；
位置：相对位置；
身高：0；
溢出：隐藏；
垫底：56.25%；
}
.比率-16-9 img，
.比率-12-9 img，
.比率-1-1 img{
位置：绝对位置；
排名：0；
左：0；
宽度：100%；
}
.比率-1-1{
垫底：100%；
}
.比率-12-9{
垫底：73.47%；
}
您可以尝试类似的方法，尽管它需要额外的div:


*{
保证金：0；
填充：0；
}
.外包装img{
显示：表格；
表布局：固定；
宽度：100%；
}
.内包装img{
显示：表格单元格；
}
.内包装仪表组{
垫底：100%；
位置：相对位置；
}
.内包装img div img{
显示：块；
最大宽度：100%；
最大高度：100%；
位置：绝对位置；
}
瑞德先生{
背景：#F00；
}
格林先生{
背景：#0f0；
}

你想说的是，平方除法不会移到下一行，但随着除法数量的增加，它的大小会变小？是的，确实是这样，在重新调整大小的除法中，图像的纵横比会保持不变。你可能想看看Flexibox。你的所有要求都应该可以用纯css实现。谢谢你的回答，但我需要n个除法所有n个分区的图像，一行谢谢你的回复，你能更具体一点吗？我有2个分区：1个用于包装，2个用于图像支架。这很有帮助，但有一个简单的问题，我希望包装高度大小是固定的，当为一个特定分辨率添加的图像较少或较多时，你不应该使用表格进行布局。请参阅