с определенным соотношением сторон с помощью CSS, вы можете использовать различные методы. Вот несколько методов, которые вы можете рассмотреть:

Метод 1. Заполнение с абсолютным позиционированием

html, body {
  height: 100%;
  margin: 0;
  padding: 0;
}
.container {
  position: relative;
  width: 100%;
  padding-top: 75%; /* Adjust this value to set the desired aspect ratio (e.g., 4:3 = 75%, 16:9 = 56.25%) */
}
.image {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

Метод 2: Flexbox с соотношением сторон

по центру;
выравнивание элементов: по центру;
соотношение сторон: 4/3; /* Отрегулируйте это значение, чтобы установить желаемое соотношение сторон */
}
.image {
max-width: 100%;
max-height: 100%;
object-fit: обложка;

Метод 3: CSS Grid с соотношением сторон

.container {
  display: grid;
  place-items: center;
  aspect-ratio: 16 / 9; /* Adjust this value to set the desired aspect ratio */
}
.image {
  max-width: 100%;
  max-height: 100%;
  object-fit: cover;
}

Метод 4: SVG с сохранением AspectRatio

<div class="container">
  <svg preserveAspectRatio="xMidYMid slice" viewBox="0 0 16 9"> <!-- Adjust the viewBox dimensions to match the desired aspect ratio -->
    <image href="your-image.jpg" width="100%" height="100%" preserveAspectRatio="xMidYMid slice" />
  </svg>
</div>

Эти методы позволяют поддерживать соотношение сторон изображения в контейнере