Адаптация фрагмента изображения

[laimas]

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

[headrush]

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

Нет. Масштабирование и сдвиги делаются с помощью CSS, а все расчеты, циферек, уже в JS. Причем необязательно даже CSS это могут быть и методы canvas. Просто расчетов слишком много, одно от другого зависит, не получается все собрать. Если записать алгоритм действий человека, то будет выглядеть так:

1. Сначала подгоняем масштаб так, чтобы область с объектом входила полностью в див. Скорее всего область с объектом по высоте и ширине не войдет одновременно. То есть сначала допустим полностью войдет по ширине, потом по длине. И по ширине тогда будет открываться все то что находится возле области с объектом. С точки зрения программной, нужно рассчитать такой %, для background-size чтобы ширина и длина масштабируемой области (она масштабируется пропорционально всему изображению) не превышала div.

2. далее мы центруем изображение, чтобы объект был по центру div и если вдруг появились белые поля ту сдвигаем по мере возможности изображение, чтобы их скрыть. Тут как бы тоже все для расчетов есть. Размеры исходного изображения, размеры div, размер и координаты области с объектом и scale коэффициент масштабирования.

[laimas]

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

Интересно, кто этим будет заниматься, то есть "давать добро" и что самое интересное знать, что "некий объект" встал на место?

На то оно и масштабируется, чтобы заняло все, а далее либо центрируем, либо от любого из краев отсчет. А чтобы "объект" вошел, значит просто растянуть до заполнения, но это уже с искажениями.

Или я так и не понял чего вы там творите.

[headrush]

Интересно, кто этим будет заниматься, то есть "давать добро" и что самое интересное знать, что "некий объект" встал на место?

На то оно и масштабируется, чтобы заняло все, а далее либо центрируем, либо от любого из краев отсчет. А чтобы "объект" вошел, значит просто растянуть до заполнения, но это уже с искажениями.

Или я так и не понял чего вы там творите.

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

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

[laimas]

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