Как пропорционально уменьшить картинку CSS

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

Например, если вам нужно уменьшить картинку так, чтобы ее максимальная ширина была 500 пикселей, вы можете добавить следующие стили:

.image {
  max-width: 500px;
  height: auto;
}

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

Также можно использовать сочетание свойств max-width и max-height, чтобы добавить ограничения и на максимальную высоту элемента, как показано в следующем примере:

.image {
  max-width: 500px;
  max-height: 500px;
  width: auto;
  height: auto;
}

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