Изменение размера изображения пропорционально с помощью CSS?

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

img.resize {
    width: 540px; /* можно использовать % */
    height: auto;
}

В этом примере ширина изображения установлена на 540 пикселей, а высота автоматически подстраивается, сохраняя пропорции изображения. Использование height: auto; позволяет избежать искажений изображения при изменении его ширины. Если вы хотите использовать процентное значение для ширины, достаточно заменить фиксированное значение на нужный вам процент.

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

#your-img {
    height: auto; 
    width: auto; 
    max-width: 300px; 
    max-height: 300px;
}

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

Если это фоновое изображение, используйте background-size: contain.

Пример CSS:

#your-div {
  background: url('image.jpg') no-repeat;
  background-size: contain;
}

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

Чтобы масштабировать элемент в CSS, вы можете использовать свойство transform с функцией scale(). Пример кода, который вы указали, выглядит следующим образом:

transform: scale(0.5, 0.5);
-ms-transform: scale(0.5, 0.5); /* Для старых версий Internet Explorer */
-webkit-transform: scale(0.5, 0.5); /* Для старых версий Safari */

Здесь scale(0.5, 0.5) уменьшает элемент в 2 раза по ширине и высоте. Вы можете добавить эти стили к нужному элементу, чтобы применить масштабирование.

Обратите внимание, что префиксы -ms- и -webkit- нужны только для обеспечения совместимости с устаревшими браузерами, поэтому если вы работаете с современными браузерами, вам может быть достаточно только transform.

Вы можете использовать свойство object-fit:

.my-image {
    width: 100px;
    height: 100px;
    object-fit: contain;
}

Это позволит вписать изображение в указанные размеры, не изменяя его пропорции.