взаимное расположение img в css

186

27 июля 2018, 18:40

Задача: расставить изображения так, как показано в рисунке во вложении ( два друг под другом, а третье - справа).

Форма изображений ТАКАЯ ЖЕ, как показана на рисунке (т.е. высота 3-го изображения равна суммарной высоте 1 и 2 + расстояние между 1 и 2; ширина тоже у всех соответствующая)

Были попытки написать такой код, но высота 3 очень сильно вылезала за сумму высот 1 и 2, хотя изначально у изображений относительная высота/ширина правильная:

.thumb { 
  height: 500px; 
} 
 
.thumb img { 
  display: inline-block; 
  width: 40%; 
  margin-bottom: 10px; 
} 
 
.box { 
  white-space: nowrap; 
  float: left; 
} 
 
.box div { 
  display: inline-block; 
}

<div class="box"> 
  <div> 
    <p class="thumb"> 
      <img src="//picsum.photos/200/300" alt="picsum.photos" title="placeholder picsum.photos"> 
      <br> 
      <img src="//picsum.photos/200/301" alt="picsum.photos" title="placeholder picsum.photos"> 
    </p> 
  </div> 
  <div> 
    <p class="thumb"> 
      <img src="//picsum.photos/200/302" alt="picsum.photos" title="placeholder picsum.photos"> 
    </p> 
  </div> 
</div>

Осуществить это все нужно адаптивно.

Answer 1

.gallery{ 
  display:flex; 
  justify-content:space-between; 
  width:400px; 
  max-width:100%; 
} 
.gallery__column{ 
  width:calc(50% - 7.5px); 
  flex:0 0 auto; 
  display:flex; 
  flex-direction:column; 
} 
.gallery__img{ 
  display:block; 
  width:100%; 
  flex:1 1 auto; 
  margin:0 0 15px; 
  object-fit:cover; 
  object-position:center; 
} 
.gallery__img:last-child{ 
  margin:0; 
}

<div class="gallery"> 
  <div class="gallery__column"> 
      <img src="//picsum.photos/200/300" class="gallery__img" /> 
      <img src="//picsum.photos/200/301" class="gallery__img" /> 
  </div> 
  <div class="gallery__column"> 
      <img src="//picsum.photos/200/302" class="gallery__img" /> 
  </div> 
</div>