具有大中心图像的自适应CSS网格

时间:2018-08-01 18:19:12

标签: css css-grid

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

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

但是,这不是一个很好的解决方案,因为固定的像素宽度会破坏响应能力,并破坏图像尺寸。有没有一种方法可以创建带有居中较大图像的CSS网格,而没有强制像素尺寸,也不会留下间隙?还是我需要在这里加入同位素

1 个答案:

答案 0 :(得分:0)

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

url()