Поместите много изображений в один div с указанием c размера

Question

Я создал приложение, которое создает множество изображений с new Image() в соответствии с контекстом.

Я хочу поместить все мои фотографии в один конкретный c div, этот div всегда будет иметь одинаковый размер: 90% экрана.

При наведении курсора на картинку появляется реальное.

Ширина фотографии должна быть изменена в соответствии с количеством фотографий.

Это пример того, что я хочу сделать:

Каждый цвет представляет другое изображение.

Это когда я наводил курсор на картинку (здесь: красный):

Я совершенно не знаю, как Сделай это. Если у вас есть идея или ключ к разгадке одной из этих вещей, вы можете мне помочь! Спасибо.

Answer 1

Вы можете использовать события onmouseover и onmouseout, чтобы захватить элемент изображения, который вы хотите выбрать. Добавление прослушивателей событий ко всем изображениям было бы потенциально плохой идеей из-за утечки памяти, если вы не обрабатываете их осторожно и изображений много. Я думаю, вы можете добавить прослушиватель событий в окно или документ и узнать исходный элемент (цель) события mouseover и mouseout при наведении.

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

После этого вы получите URL-адрес изображения с помощью 'sr c 'атрибут тега изображения для обновления изображения главного героя.

Также, что касается производительности при большом количестве изображений, я советую вам использовать изображения в качестве фона для div с css вместо тега img. Они быстрее тегов img. (почему? изображения можно масштабировать, если тег img, а фон - нельзя).

Answer 2

когда вы добавляете изображение в div, вы можете это сделать.

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

Я полагаю, вы используете jquery, по крайней мере, у вас есть идея получше. (Примените ширину для каждого изображения внутри, ширина равна количеству изображений на 100 процентов).