Как заставить изображение изменять размер и сохранять пропорции?

Вот решение:

object-fit: cover;
width: 100%;
height: 250px;

Вы можете настроить ширину и высоту в соответствии с вашими потребностями, а свойство object-fit самостоятельно выполнит обрезку изображения.

Дополнительную информацию о возможных значениях свойства object-fit, а также таблицу совместимости можно найти здесь: https://developer.mozilla.org/ru/docs/Web/CSS/object-fit

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

Этот стиль сработал просто отлично, чтобы все изображения занимали доступное пространство, сохраняли пропорции и не обрезались:

.img {
   object-fit: contain;
   max-width: 100%;
   max-height: 100%;
   width: auto;
   height: auto;
}

Этот код позволяет получить желаемый результат.

Вот решение:

img {
   width: 100%;
   height: auto;
   object-fit: cover;
}

Это обеспечит то, что изображение всегда будет полностью покрывать родительский элемент (масштабируясь вверх и вниз) и сохранять соотношение сторон.

Чтобы изображение автоматически сжималось и расширялось, сохраняя при этом оригинальное соотношение сторон, просто добавьте следующий код в ваш CSS:

img {
    display: block;
    max-width: 100%;
    max-height: 100%;
    width: auto;
    height: auto;
}

Этот код устанавливает изображение как блочный элемент и ограничивает его максимальную ширину и высоту 100% от родительского контейнера, что позволяет изображению адаптироваться к размеру, сохраняя пропорции.

Для установки CSS-класса вашего контейнера с изображением используйте следующий код:

<div class="image-full"></div>

Затем добавьте следующий стиль в ваш CSS-файл:

.image-full {
    background: url(...ваше_изображение...) no-repeat;
    background-size: cover;
    background-position: center center;
}

Таким образом, вы сможете задать изображение в качестве фона для контейнера с классом image-full, при этом оно будет занимать всю область контейнера, не искажаясь. Не забудьте заменить ...ваше_изображение... на фактический путь к вашему изображению.