background-size：100％100％;在Chrome中无法正常使用 [英] background-size:100% 100%; doesn't work properly in Chrome

问题描述

我使用svg图片作为背景。我试图使用CSS3的 background-size：100％100％; 但它似乎不工作，即使在应支持它的浏览器（如Chrome）。

如果您查看

I'm using an svg image as a background. I'm trying to use CSS3's background-size: 100% 100%; but it doesn't seem to work, even in browsers which should support it (like Chrome).

If you look at this site you'll see the #special-post article (to the right/below the food image) with a red banner-looking background. Notice that as you shrink the window down, the height of the background image drops to retain it's proportions, rather then stretching, as I would like.

EDIT: I checked this on FireFox and it works correctly... so this appears to be a webkit issue.

EDIT: I checked this on Safari and it works! So it looks like my problem is specific to Chrome.

(PS: I'm familiar with this alternative solution, using an img tag, but I'd rather not use it.)

解决方案

Here's a workaround:

Open your .svg file, find the <svg> tag at the beginning and add the following property inside it:

preserveAspectRatio="none"

Source: http://www.yootheme.com/support/question/6801?order=modified

这篇关于background-size：100％100％;在Chrome中无法正常使用的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！