css - 具有大中心图像的响应式 CSS 网格

Question

我正在寻找创建一个 5 列 CSS 网格布局。内容将由客户的 CMS 填充，因此我希望使用重复功能，以便可以根据需要添加更多内容。然而，我遇到的困难是添加一个大的、居中的图像grid-row: 2/3和grid-column: 2-4. 理想的设计如下所示：

https://codepen.io/anon/pen/QBQzvV

然而，这不是一个很好的解决方案，因为固定的像素宽度会破坏响应能力和强制图像尺寸。有没有办法用居中的较大图像创建这个 CSS 网格，没有强制像素尺寸，也不会留下间隙？或者我需要在这里拉同位素吗

标签： csscss-grid

Answer 1

从你的笔复制。只需将高度更改为 100%

img:nth-child(6), img:nth-child(7) {
  height: 100%;
}