Javascript 将多张图片放入一个具有特定大小的div中

我已经创建了一个应用程序，它可以根据上下文创建大量带有新图像的图片

我想把我所有的照片放在一个特定的分区中，这个分区的大小总是一样的：屏幕的90%

当我将鼠标悬停在图片上时，将显示真实的图片

照片宽度必须根据照片数量调整大小

这是我想做的一个例子：

每种颜色代表一幅不同的画

这是我在这里悬停图片的时候：红色的：

---

我完全不知道该怎么做。如果你对这些事情有什么想法或线索，欢迎你帮助我！谢谢。

当您将图像添加到div中时，您可以将其添加到此

$("div > img").css("width",($("div > img").length/100)+"%");

我认为您正在使用jquery，如果不是的话，至少您有一个更好的想法。

---

为内部的每个图像应用宽度，宽度为图像数/100%

可以使用onmouseover和onmouseout事件获取要选择的图像元素。 如果您不小心处理事件侦听器，并且图像太多，那么将事件侦听器添加到所有图像可能会导致内存泄漏。我认为您可以将事件侦听器添加到窗口或文档中，并在悬停时找到mouseover和mouseout事件的源元素target

window.onmouseover = function(event) {
       event = event || window.event;
       const srcEl = event.srcElement || event.target;
       // use srcEl for further actions (get image src url or whatever)
}

之后，通过图像标记的'src'属性获取图像url，以更新主英雄图像

---

另外，对于大量图像的性能，我建议您使用图像作为带有css的div的背景，而不是img标记。它们比标记img快。为什么？如果使用img标记，图像可以缩放，但背景不能缩放。

您可以尝试在每个图片元素上添加事件侦听器addEventListener，然后使用mouseover显示图片元素，并使用mouseout再次隐藏它