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

Question

[weranda]

Приветствую.

Ситуация. Есть большая фотография материнской платы, огроменнейшая. Надо показать в увеличенном виде много ее частей, т. е. а) нарезать и сделать много небольших изображений или б) загрузить фотографию целиком и как-то спозиционировать ее внутри блока на нужной точке. Вариант б — всего один запрос + в итоге меньший объем данных занимает. В идеале хотелось, чтобы это выглядело примерно так: видео (с возможностью смещения движением + чтобы все выглядело точно по указанной точке на любом экране).

Если знаете решение, готовый скрипт, будет классно его узнать.

Comments

[Ankhena]

б) загрузить фотографию целиком и как-то спозиционировать ее внутри блока на нужной точке.

Абсолютом и спозиционировать.

[weranda]

Ankhena, Вот только не пойму я как это сделать так, чтобы нужный центр изображения был всегда в центре блока. Блоки могут быть разной ширины. Пытался сделать это на codepen, но не получилось. Есть идеи?

[Froggyweb]

https://www.w3schools.com/howto/howto_js_image_zoom.asp

[Ankhena]

weranda,

Вот только не пойму я как это сделать так, чтобы нужный центр изображения был всегда в центре блока.

да собственно, точно также как ставят абсолют в центр, с помощью calc или transform.
https://codepen.io/AnnaSummer/pen/LYmVrOJ

Answer 1

[Денис Инешин]

Вам нужно что-то вроде этого