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

На данный момент нет корректного способа сделать это детерминированным образом с фиксированными размерами изображений, такими как JPEG или PNG.

Чтобы изменить размер изображения пропорционально, нужно установить либо высоту, либо ширину в "100%", но не то и другое." Если вы установите и высоту, и ширину в "100%", ваше изображение будет растянуто.

Выбор между высотой и шириной зависит от размеров вашего изображения и контейнера:

1. Если ваше изображение и контейнер имеют одинаковую ориентацию (оба "портретные" или оба "ландшафтные"), то не имеет значения, какую из сторон устанавливать на "100%".
2. Если ваше изображение "портретное", а контейнер "ландшафтный", вы должны установить height="100%" для изображения.
3. Если ваше изображение "ландшафтное", а контейнер "портретный", вы должны установить width="100%" для изображения.

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

Вам просто нужно убедиться, что в файле SVG нет следующих свойств в теге <svg>:

height
width
viewbox

Большинство векторных графических программ устанавливают эти свойства при экспорте SVG-файла, поэтому вам придется вручную редактировать файл каждый раз после экспорта или написать скрипт для автоматизации этого процесса.

Я вижу, что многие предлагают использовать object-fit, что действительно хороший вариант. Но если вы хотите, чтобы это работало и в старых браузерах, есть другой простой способ сделать это.

Это довольно просто. Я использовал подход с позиционированием изображения внутри контейнера с помощью absolute и затем разместил его точно по центру с использованием комбинации:

position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);

Как только изображение оказывается в центре, я задаю ему такие стили:

// Для вертикальных блоков (где высота больше ширины)
height: 100%;
width: auto;

// Для горизонтальных блоков (где ширина больше высоты)
height: auto;
width: 100%;

Таким образом, изображение получает эффект, аналогичный object-fit: cover.

Вот демонстрация приведенной логики.

https://jsfiddle.net/furqan_694/s3xLe1gp/

Этот метод работает во всех браузерах.

Следующий код отлично работает для меня:

img {
   height: 99999px;
   object-fit: contain;
   max-height: 100%;
   max-width: 100%;    
   display: block;
   margin: auto;
}

Данный стиль позволяет изображению адаптироваться, сохраняя при этом пропорции, и при этом центрирует его на странице. Параметры max-height и max-width гарантируют, что изображение не выйдет за границы контейнера.

Проблема в вашем коде конструкции HTML и CSS заключается в нескольких моментах. Судя по вашему вопросу, вы хотите создать контейнер с фоном, но у вас есть некоторые ошибки.

1. Ошибка в HTML: У вас отсутствует закрывающая кавычка в теге div. Должно быть <div id="container">.

2. Свойство background-size: Вы используете значение content, которое не является допустимым значением для свойства background-size. Попробуйте использовать cover или contain, чтобы корректно масштабировать изображение. Значение cover обеспечивает заполнение контейнера фоном, при этом может обрезать изображение, тогда как contain полностью включает изображение, включая его возможные пустоты.

Вот исправленный код:

<style type="text/css">
    #container {
        text-align: center;
        width: 100%;
        height: 200px; /* Задаем высоту */
        margin: 0;
        padding: 0;
        background-image: url('../assets/images/img.jpg');
        background-size: cover; /* Масштабируем изображение */
        background-repeat: no-repeat;
        background-position: center;
    }
</style>

<div id="container">
    <!-- Внутри контейнера -->
</div>

С этими исправлениями контейнер должен корректно отображаться с фоновым изображением. Если у вас возникают другие вопросы, не стесняйтесь задавать!

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

.example {
    height: 220px; /* Устанавливаем высоту */
    background: url('../img/example.png');
    background-size: 100% 100%;
    background-repeat: no-repeat;
}

В этом коде определена фиксированная высота в 220 пикселей для элемента с классом .example. Убедитесь, что заданная высота соответствует вашим требованиям, чтобы изображение корректно отображалось, не искажая его пропорции. Также стоит обратить внимание на значение поля background-size, установленное в 100% 100%, так как оно будет растягивать фоновое изображение в соответствии с заданными размерами элемента.