Как при загрузке страницы спозиционировать картинку по центру в блоке?

Question

[Капитан Какао]

В общем есть такая структура: jsfiddle.net/6rhao7pf/1
Просто блок div и в нём картинка которая скролится по горизонтали и вертикали.
По дефолту, при загрузке страницы мы видим левый верхний угол картинки.
Как делать так, что бы при загрузке страницы по дефолту мы видели центр картинки.
Для наглядности прикрепляю скрин как есть и как нужно.

Answer 1

[holfza]

Например можно так

Comments

[Капитан Какао]

Благодарю, как раз то, что мне и нужно. Ваш пример, решает мою задачу, но чисто для себя интересно стало.
Это мы значение в px указываем. А если скажем я не знаю размера картинки, или размер всегда меняется, так как картинки разные. Можно ли это дело как-то в процентах указать, или это уже нужно больший код писать., который будет высчитывать размер картинки, отнимать половину, и вносить это значение?

[holfza]

Обновил ссылку

[Капитан Какао]

holfza: круто, спасибо ещё раз!)

[holfza]

Только я там ошибся в scrollLeft.. Отнял высоту блока, а не ширину.. Думаю сами исправите :)

[Капитан Какао]

holfza: не столь важно, главное вы показали как это делается)

Answer 2

[jlekapb]

Если нужно сместить именно картинку и не позицию на странице, то background-size должен помочь
https://css-tricks.com/almanac/properties/b/backgr...

Comments

[Капитан Какао]

Если картинку делать фоном, то я знаю как её отцентрировать)
Мне нужно было именно так, как показано в решении)
Но всё равно спасибо за участие)