图像与带背景图像的 Div答案

【问题标题】：Image vs Div with Background-Image图像与带背景图像的 Div
【发布时间】：2015-11-20 03:29:47
【问题描述】：

我正在尝试使用 bootstrap 和 flex 构建一些精美的项目网格。因此，通过保持 1:1 的比例，项目图像始终必须扩展到可用空间的 100% 宽度。

我通过使用 css 背景图像让它工作。但是我很难通过使用 img-tag 让它看起来一样。我的想法不多了，希望你能帮助我。

【问题讨论】：

【解决方案1】：

我认为图像将框的宽度推到了max-width，因此有点覆盖flexbox 设置。对于背景图像，您基本上没有任何内容，因此 flexbox 可以计算宽度而不用担心内容。图像设置为 100%，但它认为您想要 100% 的最大宽度，因此网格不再适合。

如果您在 .flex-item 上设置 width: 33%; 并删除最小值和最大值，则网格看起来会相同。

【讨论】：

【解决方案2】：

在您的 CSS 中，只需在图像上指定 width: 100% 并且不要触摸高度（或将其设置为默认值 auto）。

您的图片的父级还应该有一个position:absolute 或position:relative 以使宽度正常工作

【讨论】：

这不是问题。图像占用了 .flex-item 的整个最大宽度，这是不应该发生的。在背景图像示例中，div 不采用 max-width，但 img-tag 采用。我不知道为什么！