响应式网格图像查看 3 张图像答案

【问题标题】：Responsive Grid image View for 3 images响应式网格图像查看 3 张图像
【发布时间】：2020-07-11 20:57:19
【问题描述】：

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

这 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;
}

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

使用弹性框：

.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;
}

好吧，我要么根本无法获得想要的布局，要么无法调整大小。图像不会调整大小，而是跳到新行。

【问题讨论】：

如果 grid 和 object-fit :cover 不好，你期望发生什么？重置对象拟合值以包含？

标签： html css image

【解决方案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>

【讨论】：