Как всерстать вот так изображения?

Question

[rootnoroot]

Нужно сверстать вот такой блок

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

Comments

[Клим Куликов]

ну если самое быстрое решение, то можно сделать 2 wrapper'а, в одном 2 картинки, в другом одна и их родителю display: flex;

[rootnoroot]

Клим Куликов, Спасибо
скорее всего это дело будет в цикле выводиться
по этому такой способ не подойдет

[Клим Куликов]

rootnoroot,
Вот ваш же грид, просто img задал height: 100%

UPD: не знаю почему тут так отображается, но если зайти в саму песочницу, то выглядит нормально

[rootnoroot]

Клим Куликов, Спасибо
но это уже будет растягивать изображение не пропорционально

Answer 1

[Сергей delphinpro]

Правки в вашем примере

img{
    width:100%;
+   height: 100%;
+   object-fit: cover;
}

.img{
    width:700px;
    margin:auto;
    display: grid;
-   grid-template-columns: repeat(3, 1fr);
+   grid-template-columns: 2fr 3fr;
    grid-row-gap: 10px;
    grid-column-gap:20px;
}

.img div:nth-child(2){
-   grid-column-start: 2;
-   grid-column-end: 4;
-   grid-row-start: 1;
-   grid-row-end:3;
+   grid-row: span 2;
}

Comments

[rootnoroot]

Ого схема
Благодарю!

Answer 2

[Ludov]

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

<div class="container">
   <div class="box box-left">
      <img src="img/fp-l-up.png" alt="">
      <img src="img/fp-l-d.png" alt="">
   </div>
   <div class="box box-right">
      <img src="img/fpr.png" alt="">
   </div>
</div>

.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: 0 0 10px 0;
}

.box-right {
   width: 500px;
}