确定要放置在固定图层中的图像数量

Determine number of images to place in a fixed layer

本文关键字：图像图层更新时间：2023-09-26

正如标题所解释的那样。

我需要确定我可以在div 中放置多少图像，例如 100px x 100px 以及每个图像的宽度和高度。

我一直在试图弄清楚算法，但我的大脑被炸了。

到目前为止，我

所拥有的(JavaScript(是取宽度+高度(减去填充(/我拥有的图像数量，所以假设我有13张图像要放置在100x100中，例如，我最多可以放置4张，但是我如何确定每个图像的高度(宽度将为100px(以使比例适合？

更新

好的，我有 20+ 张图像，我想在 100x100 块中显示，而不会切断左侧或右侧的图像。那么，我如何通过代码确定我只能显示 4 张图像，每张图像为 25px x 25px。如何确定 4 张图像的适当宽度*高度以最佳地适合 100*100 以内。

简短的回答是 WidthOfYourDisplayArea '' NumberOfImagesYouWantToFitInThatArea。其中"''"表示整数除法，但还有更多

。

在其基础上，这将是一个平铺问题，即用 20 个不同大小的缩略图填充 100x100 矩形(请参阅下文(。但是，由于您正在修复缩略图的尺寸，因此最终成为一个更容易处理的问题。

由于图像具有纵横比，因此您只需要使用一个维度，并让另一个维度"自行解决"。

无论如何，您的缩略图仍然必须测量 25x25，但其中的图像必须调整大小以使内容看起来不失真。所以你可以做的就是把你的 imgs 包装在div 中。div 将是 25x25，但 imgs 尺寸会有所不同。

如果您尝试处理缩略图的原始图像是 1024x768(例如(，则其纵横比为宽度/高度 = 1024/768 = 1.33333 .您将试图通过固定其宽度来找出图像的高度。因此，您正在查看类似 25 *(高度/宽度((注意反转(的东西，结果为 25 * (1/1.33333( = 18.75004。因此，此缩略图看起来有点像穿过 25x25 正方形的"带"，并在顶部和底部占据大约 3 个像素的空间。

我希望这有所帮助。