background-image 图片加载成功，为什么不显示？ Chrome Bug？

V2EX = way to explore

V2EX 是一个关于分享和探索的地方

现在注册

已注册用户请登录

V2EX 提问指南

这是一个创建于 4014 天前的主题，其中的信息可能已经有所发展或是发生改变。

如图，Chrome Version 31.0.1650.57
Safari 正常，另外一台 Ubuntu Chrome 28 也能正常显示。

第 1 条附言 · 2013-12-05 11:08:36 +08:00

目测和 Rails 4 的 Turbolinks 有关，我把浏览器的 JavaScript 禁用，或者通过网址直接访问这个页面，或者刷新图片都能够正常显示。问题是，在 Safari 和其它版本上的 Chrome 都没这个问题...

Chrome

image

background

5 条回复 • 1970-01-01 08:00:00 +08:00

yushiro

2013-12-04 13:43:31 +08:00

试试给div指定宽高，宽高就等于背景图的宽高。

JoyNeop

2013-12-04 20:16:03 +08:00

同楼上，指定款高

//P.S. 不要用 style 属性啊……要放进 style 标签或者 link 或 @import 进来啊……

toctan

2013-12-05 10:05:43 +08:00

@yushiro
@JoyNeop

这个之所以用 inline style 是因为每个 node 都有自己的背景图片，是从数据库取出来的。而且我不可能指定宽高，第一，这会破坏 fluid layout，第二，这图片用户上传我不知道宽高。

yushiro

2013-12-05 10:39:29 +08:00

那就不能用div的背景图来实现你的效果，因为背景图不会撑开DIV(至少chrome下如此，解决办法未找到，如果你找到什么方法，请回复一下）
还有，既然你都已经图片从数据库取出了，多带一个宽高信息吧，这个很有用，以后显示瀑布流很方便。

toctan

2013-12-05 11:06:01 +08:00

@yushiro 我知道背景图不会撑开 div, 这个 div 的宽高不会通过图片来确定，其长宽比是确定的(golden ratio)，通过 padding 来控制。这本来就是一个背景图，不应该用 img tag 作为 content 出现。

另外，这样做是没有问题的。看这里： https://medium.com/collections
我估计是因为我用了 Rails 4 的 Turbolinks, 刚好在这一个 Chrome 版本有点问题。因为前段时间在 Ubuntu, Arch Linux 上开发都没有问题，这两天换了 Mac, 在 Chrome 里才出现这问题的，Safari 也正常。