Как правильно вписать большую картинку в маленький блок целиком на CSS/SCSS?

В макете есть такой блок:

введите сюда описание изображения

Тут две строки по 4 примера работ. Решил сделать на flex одну строку, чтоб по кнопке можно было догружать еще работы, но пока до JS не дошел. Нужно вписать картинку любого размера в квадрат.

Есть например картинка размером 740х740px и мне надо целиком вписать ее в квадрат 480х480px

В данном случае object-fit обрезает большую картинку примера работы, а я хочу уменьшить ее масштаб а не обрезать. Возможно ли это?


Ответы (3 шт):

Автор решения: Оксана Беспамятных

Может задать картинку как background-image и задать размер с помощью background-size: cover

→ Ссылка
Автор решения: Pilaton

А почему object-fit не подошел, там же можно параметры на любой вкус выбрать?

img

→ Ссылка
Автор решения: Konstantin_SH

вместе с object-fit: cover; надо max-width : 100% и max-height: 100% картинке назначить

→ Ссылка