размер фона: 100% 100%; не работает должным образом в Chrome

Question

Я использую изображение SVG в качестве фона.Я пытаюсь использовать CSS3 background-size: 100% 100%;, но, похоже, он не работает, даже в браузерах, которые должны его поддерживать (например, Chrome).

Если вы посмотрите на этот сайт , выВы увидите #special-post article (справа / под изображением еды) с красным знаменем фона.Обратите внимание, что когда вы уменьшаете окно, высота фонового изображения падает, чтобы сохранить его пропорции, а не растягиваться, как мне бы хотелось.так что, похоже, это проблема webkit.

РЕДАКТИРОВАТЬ: Я проверил это в Safari, и он работает!Таким образом, похоже, что моя проблема относится только к Chrome.

(PS: I'm familiar with это альтернативное решение с использованием тега img, но я бы не стал его использовать.)

Answer 1

Вот обходной путь:

Откройте файл .svg, найдите тег <svg> в начале и добавьте в него следующее свойство:

preserveAspectRatio="none"

Источник: http://www.yootheme.com/support/question/6801?order=modified

Answer 2

Оказывается, это известная ошибка в Chrome, специфичная для фоновых изображений svg. Я использую v 17.0.963.56, на случай, если кому-то все равно, и вы можете отследить ошибку здесь .

Answer 3

background-size: cover

Работает по всем направлениям. Протестировано с Safari, Chrome и FF.

Answer 4

Это все еще проблема в Chrome 39, но не в Firefox. Я столкнулся с этим при масштабировании фона SVG примерно так:

background-image: url(bg.svg);
background-repeat: repeat-x;
background-size: 1200px auto;

Даже с точными горизонтальными размерами в пикселях в SVG я получил небольшой разрыв. Это работало, когда я не масштабировал это:

background-size: auto auto;

Не слишком много решения, чтобы не масштабировать фон, но все же.