Помочь с кодом html, css

На сайте есть каталог товаров. Изображения товаров все разные и на странице полный хаос. Я нашёл решение, как "впихнуть" изображения в рамку товаров, чтобы все было одинаково: style="width: 100%; height: auto; max-width: 253px; max-height: 166px; object-fit: cover;" НО! Сайт адаптивный. Если менять размер страницы, то карточки товаров становятся больше, а изображения остаются такими же маленькими, которые я задал стилем выше. Нужно: 1. Написать класс, который я буду применять к этим изображениям. 2. Класс должен менять размер изображений в зависимости от размера карточки товара. 3. Изображение не должно быть увеличенным, а должно полностью вмещаться в карточку, т.е. где-то будут поля сверху-снизу или справа-слева. 4. Изображени должно находиться по центру. Код html: <a href="deals-detail.html"> </a>