Пишу профиль пользователя, пользователь загружает изображение, скажем изображение 400px на 200px (изображения планируются быть разного разрешения и веса), в профиле выводится изображение 200px в ширину (width - средствами css задаю максимальный размер 200px, высота подстраивается автоматически и каждый раз разная).
Если задать средствами css ширину и высоту 200px на 200px (к примеру) то изображение будет 200px на 200px но при этом много растянутых, сжатых. А нужна четкая картинка, пусть определённой области.
Нужно чтоб изображения подстраивались под выделенную область и чтоб не сжимались. Думаю нужно показывать определенную область изображения (делать фокус на определённой части изображения).
Пока не понимаю как это реализовать.
Как вы решаете данную задачу? может какие гемы используете или другое решение?
Вот таким способом мы заставляем любое изображение быть не меньше, чем наш квадрат, и располагаться строго по его центру: codepen.io/andrey-hohlov/pen/WGEJpq
Так же на CSS можно прибить к левому краю, к правому, к верху, к низу и т.д.
А на backend желательно изображения ресайзить, из соображений производительности.
Способы почти идентичны
1. элемент с фиксированными размерами, картинка у него как фон, и background-size: cover
2. object-fit: cover у картинки с фиксированными размерами
Простой