Обрезка фотографии без растягивания

В карточках нужны одинаковые превью, а исходники сняты в разных пропорциях. Растягивание width и height искажает лица и логотипы. Подойдёт object-fit.

.preview { width: 100%; height: 240px; object-fit: cover; object-position: center; }

cover заполняет рамку с обрезкой краёв. Для логотипов обычно нужен contain и свободное место вокруг. Не используйте обрезанное превью вместо полной фотографии в детальном просмотре. Проверьте портретный и панорамный исходники; важный объект можно сдвинуть через object-position.