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

1. Использование техники «дополнения». Вы можете обернуть изображение внутри контейнера div и установить желаемое соотношение сторон, применив отступ сверху или отступ снизу. Вот пример:

<div class="image-container">
  <img src="your-image-source.jpg" alt="Your Image">
</div>

.image-container {
  position: relative;
  width: 100%;
  padding-top: 75%; /* 4:3 aspect ratio (height divided by width) */
}
.image-container img {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

2. Использование свойства «object-fit». Вы можете напрямую применить свойство «object-fit» к самому изображению, указав желаемое значение, например «содержать» или «покрыть». Этот метод позволяет изображению помещаться в контейнер, сохраняя при этом соотношение сторон. Вот пример:

<img src="your-image-source.jpg" alt="Your Image" class="aspect-ratio">

.aspect-ratio {
  width: 100%;
  height: 0;
  padding-bottom: 75%; /* 4:3 aspect ratio (height divided by width) */
  object-fit: cover;
}

3. Использование свойства «background-image». Вместо использования тега вы можете установить изображение в качестве фонового изображения элемента контейнера и использовать свойство «background-size». для управления соотношением сторон. Вот пример:

<div class="image-container"></div>

.image-container {
  width: 100%;
  padding-top: 75%; /* 4:3 aspect ratio (height divided by width) */
  background-image: url(your-image-source.jpg);
  background-repeat: no-repeat;
  background-size: cover;
}

Эти методы гарантируют сохранение соотношения сторон изображения независимо от размера контейнера.