css - 使 sibling 的图像双倍高度(难以主题)

Question

当屏幕缩放时，我正在努力使右侧的大图像在视觉上与其他元素保持一致。

如果可以的话，可以使用 Flexbox 或网格，我只是不确定如何使用这些工具来实现。

谢谢

<section class="content-wrap sleep-smart">

 <div class="col-1-of-3 fold">
 <a href="#">
 <img class="sleep-smart__img sleep-smart__img--beds" src="http://qwerty-demos.co.uk/img/folding-beds.jpg" alt="xxx">
 <div class="sleep-smart__title-box">
 <h3 class="sleep-smart__h3">Folding Beds</h3>
 <span class="sleep-smart__faux-link">Discover<br>More</span>
 </div>
 </a>
</div>

https://codepen.io/qwerty-design/pen/PQVzaL?editors=1100

Answer 1

可以通过多种方式实现，其中之一是使用 CSS 网格。你可以找到一个很好的指南here和 here

To make an HTML element behave as a grid container, you have to set the display property to grid or inline-grid. Grid containers consist of grid items, placed inside columns and rows.

.grid-container {
  /*Must set display to grid or inline-grid*/
  display: grid;
  
  /*Define number of columns and column width*/
  /*Here we define 3 columns each of which is 33% of its parent width*/
  /*You can set each column with different width e.g.(100px, 200px, 50px)*/
  grid-template-columns: repeat(3, 33%);
  
   /*Define number of rows and row height*/
  /*Here we define 2 rows each of which is 100px*/
  grid-template-rows: repeat(2, 100px);
  
  /*Spaces between columns*/
  grid-column-gap: 10px;
  
  /*Spaces between rows*/
  grid-row-gap: 10px
}
/*Just for demo*/
.item-1,
.item-2,
.item-3,
.item-4,
.item-5 {
  background-color: #333;
  color: #fff
}
/*For each item, select its position you can think of it as a table and point to each cell with (row,col)*/
.item-1 {
  grid-column-start: 1;
  grid-column-end: 2;
  grid-row-start: 1;
  grid-row-end: 2;
}

.item-2 {
  grid-column-start: 1;
  grid-column-end: 2;
  grid-row-start: 2;
  grid-row-end: 3;
}

.item-3 {
  grid-column-start: 3;
  grid-column-end: 4;
  grid-row-start: 1;
  grid-row-end: 3;
}

.item-4 {
  grid-column-start: 2;
  grid-column-end: 3;
  grid-row-start: 1;
  grid-row-end: 2;
}

.item-5 {
  grid-column-start: 2;
  grid-column-end: 3;
  grid-row-start: 2;
  grid-row-end: 3;
}

<div class="grid-container">
  <div class="item-1">1</div>
  <div class="item-2">2</div>
  <div class="item-3">3</div>
  <div class="item-4">4</div>
  <div class="item-5">5</div>
</div>