Как правильно расположить и форматировать вот эти изображения?

Question

Султан

css

Как правильно расположить и форматировать вот эти изображения?

Как сверстать блок с совпадающими пропорциями по высоте и ширине, используя гриды? Приложу пример, но у меня не получается установить нужные размеры. 

Нужно сверстать блок, чтобы пропорции его высоты и ширины соответствовали заданным требованиям. Я пробую использовать гриды, но мои попытки не приводят к нужному результату.

13 ноября 2023 г. 12:39

Ответы на вопрос 2

Похожие вопросы

Answer 1

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

Пример кода для расположения изображений с использованием гридов:

HTML:
```
<div class="image-grid">
  <img src="image1.jpg" alt="Image 1">
  <img src="image2.jpg" alt="Image 2">
  <img src="image3.jpg" alt="Image 3">
</div>
```

CSS:
```
.image-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr); /* Задаем три столбца */
  grid-auto-rows: minmax(200px, auto); /* Задаем высоту строк */
  grid-gap: 10px; /* Задаем отступы между изображениями */
}

img {
  width: 100%; /* Устанавливаем ширину изображений на 100% */
  height: 100%; /* Устанавливаем высоту изображений на 100% */
  object-fit: cover; /* Заполняем площадь изображения в соответствии с размерами блока */
}
```

В данном примере создается контейнер `.image-grid`, внутри которого располагаются изображения. С помощью свойства `grid-template-columns` задается ширина столбцов, а свойство `grid-auto-rows` задает высоту строк. С помощью `grid-gap` можно задать отступы между изображениями.

Затем, чтобы изображения заполняли свои родительские блоки, используется CSS свойство `object-fit: cover;`.

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

Answer 2

Если вам не нужна адаптивность...


   
      
      
   
   
      
   


CSS:

.container {
   display: flex;
   width: 880px;
   height: 480px;
   background-color: #fdfbf3;
   justify-content: center;
   align-items: center;
}

.box-left {
   width: 300px;
   display: flex;
   flex-direction: column;
   margin-right: 15px;
}

.box-left img:first-child {
   margin-bottom: 10px;
}

.box-right {
   width: 500px;
}