html - 响应式网格图像查看3张图像

Question

我目前正在尝试创建一个网站，希望显示3张图片。

这三个图像大小相同，但应显示如下:

|---------| |---------|
|         | |         |
|         | | image 2 |
|         | |         |
|         | |---------|
| image 1 | 
|         | |---------|
|         | |         |
|         | | image 3 |
|         | |         |
|---------| |---------|

我还希望该站点能够对浏览器的大小做出响应，以使图像保持在同一网格中，但是变得越来越小。

我已经尝试过的

使用网格:

.gridcon {
    margin-left: 320px;
    display: grid;
    grid-template-columns: 50% 50%;
    grid-template-rows: 960px 960px;
}

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

有了它，图像本身会调整大小，但不会调整尺寸(这意味着我得到的显示图片更少，而仍然使用屏幕的相同区域)

使用flexbox:

.main {
  margin-left: 320px; /* Same as the width of the sidenav */
  padding: 0px 0px;
  display: flex;
  align-content: flex-start;
  height: 100%;
}

.main .column1 {
    height: auto;
  padding: 0px 5px;
}

.main .column1 img {    
}

.main .column2 {
  padding: 0px 5px;
}

.main .column2 img {    
height: 50%;
    display: block;
  padding: 0px 0px;
  margin-top: 0px;
}

好吧，我要么根本无法获得所需的布局，要么就无法调整其大小。图像没有调整大小，而是跳到了新的一行。

Answer 1

我不是CSS Grid的专家，但是我认为这可以为您提供帮助。请试试。

Flex Variant

html, body {
  padding: 0;
  margin: 0;
}

.item-a {
  grid-area: side-left;
}

.item-b {
  grid-area: side-right-up;
}

.item-c {
  grid-area: sider-right-down;
}

.container {
  display: grid;
  grid-template-columns: calc(50% - 15px) calc(50% - 15px);
  grid-template-rows: calc(50% - 15px) 50%;
  grid-template-areas:
    "side-left side-right-up"
    "side-left sider-right-down";
  grid-column-gap: 15px;
  grid-row-gap: 15px;
}

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

<div class="container">
  <div class="item-a">
    <img class="" src="https://source.unsplash.com/random" alt="">
  </div>
  <div class="item-b">
    <img src="https://source.unsplash.com/random" alt="">
  </div>
  <div class="item-c">
    <img src="https://source.unsplash.com/random" alt="">
  </div>
</div>