Как сделать превью пропорциональным?

Question

[Андрей]

В галерее на превьюшках фотографии выглядят непропорционально и некрасиво. Как сделать пропорциональные превьюшки, чтобы ничего не растягивалось?

Comments

[Антон Р.]

Надо делать обрезку превьюшек при загрузке, скрипт править надо. Через CSS тоже можно через overflow hidden но это костыль как по мне.

[Андрей]

Антон Р., обрезать надо до размеров превью? То есть размер блока с превьюшкой у меня 350px x 360px, а фулл может быть в несколько тысяч пикселей. Получится, что на превью будет малая часть изображения. Или я что то не понимаю?

[Антон Р.]

Андрей,

что на превью будет малая часть изображения

- нет. Берется фулл скажем 1600*1200 и режется сначала до 1200*1200 (берем меньшую сторону и из неё делаем квадрат), потом уменьшаем до нужной величины, скажем 300*300 ( - Закажи код у погроммиста!!11)

[Андрей]

Антон Р., я не могу вносить изменения в код. Всё что у меня есть - админка жумлы (работаю с ней в первый раз). Сейчас нарезал руками - вроде бы всё отлично.
Сейчас попробую нарезать пару десятков и посмотреть что получится.
Спасибо!

spoiler

Меня ждет долгая ночь кропотливой рутинной работы)

[Андрей]

Дмитрий, там есть только настройки высоты и ширины самих img-ов с превью.

Answer 1

[Abr_ya]

Думаю, нужно уточнить, какое поведение от "неквадратных" фото вы хотите? И... реализовать его на CSS!
Я вижу два варианта:
- поля,
- обрезка.
Первый вариант можно реализовать довольно консервативно, как мне кажется. Но, думаю, в любом случае стоит посмотреть на:
https://html5book.ru/svoystva-object-fit-i-object-...
как советовали выше!
Но это или без поддержи IE, или для него искать полифилл, или костыль, т.к.:
https://caniuse.com/#feat=object-fit