Имеется картинка, размеры могут быть любые. Имеется область, полотно, canvas, если понятнее. Картинка может быть как больше заданной области, так и меньше, причем в разные оси, то есть картинка может быть по ширине больше области, но по высоте меньше ее, и наоборот. Если картинку разместить в этой области, то все, что выходит за ее границы будет скрыто. Задача состоит в том, чтобы масштабировать картинку с сохранением пропорций так, чтобы она заняла всю область полностью, в области пустых пространств быть не должно. Для решения есть два пути - масштабировать картинку по ширине области, или по высоте, как в размеры большие этой области, так и в размеры меньшие этой области, пусть заведомо известно, что пропорции картинки сохранятся при масштабировании и вся задача, таким образом, сводится к тому, чтобы правильно определить в сторону какой оси нужно масштабировать картинку (по ширине области или по длине). Известны ширина и длина картинки, ширина и длина области. То есть если картинка по ширине больше области, но по высоте меньше ее, то в данном случае мы масштабируем по высоте, так как в обратном случае на области будет пустое пространство. Или если картинка по ширине меньше области, но по высоте больше, то масштабируем по ширине, так как в обратном случае будет пустая область в пространстве. Примеры:
Ширина картинки - 300 пикселов Высота картинки - 420 пикселов Ширина области - 220 пикселов Высота области - 120 пикселов Решение - масштабируем по ширине области
Ширина картинки - 300 пикселов Высота картинки - 420 пикселов Ширина области - 220 пикселов Высота области - 420 пикселов Решение - масштабируем по высоте области
Ширина картинки - 300 пикселов Высота картинки - 420 пикселов Ширина области - 220 пикселов Высота области - 320 пикселов Решение - масштабируем по высоте области
Ширина картинки - 300 пикселов Высота картинки - 420 пикселов Ширина области - 220 пикселов Высота области - 220 пикселов Решение - масштабируем по ширине области
Если кому-то потребуется конкретика: пишу алгоритм масштабирования картинки на js в размер фиксированного div'a, с сохранением пропорций. Визуально я понимаю куда надо двигаться, да вот алгоритм из этого вывести не могу, голова не варит...