Картинная галерея code issue

Question

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

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

Я новичок в кодировании, поэтому я действительно надеюсь, что кто-то поможет. Вот ссылка на мой codepen: image gallery

[1]: http://codepen.io/zenturtle/pen/ezDGC 

Answer 1

Для последовательного размещения, вы должны дать #perimeter DIV position: relative, так что расположение больших изображений всегда будет по отношению к вмещающей DIV, который имеет фиксированный ширина. В противном случае позиционирование относится к браузеру/окну просмотра, что означает, что он будет отличаться в зависимости от размера и ширины браузера.

#perimeter {position: relative;} 

Возможно, вам придется сейчас скорректировать все большие координаты изображения. Однако есть более эффективные способы сделать это. Вы должны иметь возможность размещать все эти изображения с одним правилом CSS, а не отдельные для каждого изображения.