[headrush]

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

Есть изображение, на нём изображен объект. Известны размеры изображения и прямоугольная область объекта (левый верхний угол + ширина и высота). Задача состоит в том, чтобы отобразить объект изображения (минимизируя лишнее) в контейнере с произвольными размерами. Пробовал через канвас и через background на диве, слишком много получается расчетов и я в них тону.

Алгоритм такой: нужно изображение, масштабировать так, чтобы область с объектом на изображении влезла в контейнер/дисплей по центру.

Ну то есть это как:
{
background-size: cover;
background-position: center center;
}
только с применением не ко всему изображению, а к определенной области + без обрезки остатков.

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

По сути, если допустим делать через background, то мне нужно вычислить background-size в % (для width или height в зависимости от ситуации) и background-position (смещение по X и Y, чтобы центрировать объект)

Еще ситуация может усложняться тем, что объект на изображении может располагаться не по центру а ближе к какому-то краю, и тогда нужно центрировать так, чтобы не появлялись белые пробелы в контейнере, не смотря на то что сам объект будет не по-центру.