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

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

http://www.bootply.com/kPLGHtA7Kh

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

【问题讨论】:

  • 你所说的“努力让它看起来一样”是什么意思......你是指img标签布局是2 col而不是3这个事实吗?

标签: css twitter-bootstrap layout flexbox


【解决方案1】:

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

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

【讨论】:

  • 但它们并不总是 33%,如果您慢慢调整屏幕大小,有时会看到只有 2 个项目。
  • 然后使用媒体查询将其设置为 50%
【解决方案2】:

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

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

演示:http://jsfiddle.net/s3spdy5z/

【讨论】:

  • 这不是问题。图像占用了 .flex-item 的整个最大宽度,这是不应该发生的。在背景图像示例中,div 不采用 max-width,但 img-tag 采用。我不知道为什么!
猜你喜欢
  • 1970-01-01
  • 1970-01-01
  • 2022-07-21
  • 2010-12-09
  • 1970-01-01
  • 1970-01-01
  • 2010-12-16
  • 1970-01-01
  • 1970-01-01
相关资源
最近更新 更多