Сообщение от laimas
|
Ну так я и говорю, если вы хотите возложить все на css, то вы хотите ИИ, но вы же знаете и размер контейнера, и то что изображение может быть меньше контейнера, и самое главное то, что css не может "дорисовать" картинку.
Зная это, можно сделать только одно - масштабировать изображение, а уж в какую сторону его сдвинуть и на сколько, это только вам определять, ибо css уж точно не понимает, что на картинке есть объект.
|
Нет. Масштабирование и сдвиги делаются с помощью CSS, а все расчеты, циферек, уже в JS. Причем необязательно даже CSS это могут быть и методы canvas. Просто расчетов слишком много, одно от другого зависит, не получается все собрать. Если записать алгоритм действий человека, то будет выглядеть так:
1. Сначала подгоняем масштаб так, чтобы область с объектом входила полностью в див. Скорее всего область с объектом по высоте и ширине не войдет одновременно. То есть сначала допустим полностью войдет по ширине, потом по длине. И по ширине тогда будет открываться все то что находится возле области с объектом. С точки зрения программной, нужно рассчитать такой %, для background-size чтобы ширина и длина масштабируемой области (она масштабируется пропорционально всему изображению) не превышала div.
2. далее мы центруем изображение, чтобы объект был по центру div и если вдруг появились белые поля ту сдвигаем по мере возможности изображение, чтобы их скрыть. Тут как бы тоже все для расчетов есть. Размеры исходного изображения, размеры div, размер и координаты области с объектом и scale коэффициент масштабирования.