Обложка objectFit растягивает изображение, когда ширина изображения больше высоты в React easy Crop ⇐ CSS

[Anonymous]

выпустить изображение

Я использую Reaction-Easy-Crop, чтобы обрезать и масштабировать изображение в моем следующем js-приложении. Изображение растягивается и обрезается, чтобы соответствовать ширине инструмента обрезки, когда это широкое изображение (ширина > высота), но отлично работает для высоких изображений (высота > ширина), не растягивается и не обрезается, перетаскивая, я могу выбрать ту часть, которая Я хочу изображения. Вот мой фрагмент кода -

Код: Выделить всё

          className={`relative w-full aspect-square rounded-2xl overflow-hidden`}
>
{profilePicUrl && (

)}

Одно обходное решение, которое я попробовал, — это условно установить атрибут objectFit, поскольку широкое изображение не растягивается, если оно содержится, но тогда область обрезки становится меньше родительской, как показано на изображении. И если я укажу mediaStyle, то широкое изображение будет обрезано, как показано на изображении.
Я пытаюсь добиться той же функциональности для широких изображений, что и для высоких изображений.

Подробнее здесь: https://stackoverflow.com/questions/793 ... ht-in-reac