Принудительное изменение размера изображения с сохранением соотношения сторон

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

Первоначальная попытка:

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

img {
  max-width: 500px;
}

Решение:

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

• display: блок;: гарантирует, что изображение может размещаться внутри содержимого страницы.
• max-width:230px;: устанавливает максимальную ширину image.
• max-height:95px;: устанавливает максимальную высоту изображения.
• width: auto;: позволяет изображению автоматически заполнять доступное пространство в пределах максимальной ширины и макс. -ограничения высоты.
• height: auto;: автоматически регулирует высоту в зависимости от особенностей изображения. соотношение.

Результат:

Применение этих правил CSS к изображению:

This image is originally 400x400 pixels, but should get resized by the CSS:

img {
  display: block;
  max-width:230px;
  max-height:95px;
  width: auto;
  height: auto;
}

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