CSS: внутри <card>я хочу изображение максимальной высоты, и принимает всю ширину без масштабирования

Question

Я использую Bootstrap 4. У меня есть изображение внутри карты, это изображение будет заголовком карты:

<div class="card">
    <img src="..." class="card-img-top cardimg">
    <div class="card-body">
       ...
    </div>
</div>

Я не знаю ex-ante, какие размеры изображения будутпотому что он предоставляется пользователем, поэтому я хочу иметь максимальную высоту 160, я пробовал в CSS:

.cardimg {
    max-height: 120px;
    width: auto;
}

и в нескольких других версиях, это делает частично то, что я хочу, заголовокизображение имеет высоту 120px.Проблема в том, что браузер масштабирует ширину, иногда выглядит более или менее хорошо, иногда ужасно, в зависимости от высоты и ширины исходного изображения.

ТАК, как я могу увеличить изображение до максимум 120 пикселейи не масштабируется по оси X, мне все равно, если он немного обрезает изображение.

Answer 1

Я нашел ответ.Используйте свойство object-fit: cover в CSS, поэтому CSS будет:

.cardimg {
    height: 120px;
    width: auto;
    object-fit: cover;
}