Как сохранить пропорции картинки CSS

Для сохранения пропорций картинки в CSS можно использовать несколько подходов:

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

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

2. С помощью свойства height: установите фиксированную высоту изображения и автоматически установится ширина пропорционально высоте.

img {
  height: 200px;
}

3. С помощью свойств padding и background-size: установите фиксированные пропорции блока контейнера, в котором находится изображение. Для этого нужно задать отступы padding в процентах и задать background-size: cover, чтобы изображение заполняло всю площадь блока контейнера.

.container {
  padding-top: 75%; /* соотношение сторон 4:3 */
  background-image: url('path/to/image.jpg');
  background-size: cover;
  background-position: center;
}

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