在图像周围带有 <a>-tag 的平铺画廊答案

【问题标题】：Tiled gallery with <a>-tag around images在图像周围带有 <a>-tag 的平铺画廊
【发布时间】：2018-08-21 18:41:23
【问题描述】：

我正在使用纯 CSS (Bootstrap 4) 来显示平铺画廊。为此，我使用了 Bootstrap 中的 flexbox 元素（d-flex 和 flex-wrap）。

如果我只使用<img>-tags，一切正常。但我想用<a>-tag 包装图像以链接到灯箱。如果我这样做，画廊就会中断。

这是我的代码示例：https://codepen.io/cray_code/pen/RMrbzK

有什么我可以做的吗？我尝试使用 img 中的 CSS，但它不起作用。

作为可选问题：是否可以强制画廊在两列中显示？最后一张图片几乎是正方形，但显示为宽屏矩形。

【问题讨论】：

flex-grow 需要去flex项目，所以你需要为a设置它---但这还不够
我也试过了，但它也破坏了画廊
是的，因为图像现在在里面，所以你需要做不同的事情，我正在考虑修复

标签： twitter-bootstrap css flexbox bootstrap-4

【解决方案1】：

也制作锚display:flex：

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

.img-gallery img {object-fit: cover; height: 200px; flex-grow: 1;}

.img-gallery > a {
    vertical-align:middle;
    flex-grow: 1;
    margin: 2px; 
    display: flex;
}

【讨论】：

谢谢！ zgood 有点快，但我将您的答案标记为有用。

【解决方案2】：

如果您将<a> 标记为弹性项目和弹性容器，您可能会实现您想要的。所以尝试添加这种样式：

.img-gallery a {
    flex-grow: 1;
    display:flex;
}

这是更新后的CodePen

【讨论】：