Stretch svg background без сохранения пропорций

Я хочу использовать изображение svg в качестве фонового изображения, Я хочу показать все изображение (без урожая) и растянуть изображение до 100% высоты и ширины контейнера div без с сохранением исходного соотношения сторон.Stretch svg background без сохранения пропорций

Я надеялся, что это будет работать:

background-size: 100% 100%;

Но это не так, высота 100%, но ширина не, это сохранение исходного соотношения сторон.

Если я использую png-изображение вместо svg, оно действительно работает.

Есть ли способ сделать это с помощью svg?

источник

2015-09-01 Dan Bolofe

Зависит от того, что 'preserveAspectRatio' устанавливается в фактической SVG кода я угадывание. У вас есть SVG-код? –

Спасибо! Я ничего не знал о svg, но теперь я знаю немного больше, добавив, что решение preserveAspectRatio = «none» было решением. –

Решение:

Открыть файл SVG в текстовом редакторе и добавьте этот атрибут:

<svg preserveAspectRatio="none"

источник

2015-09-01 14:38:36

-2

.sample { 
    height:500px; 
    width:500px; 
    background-image: url('sample.svg'); 
    background-size:cover; 
    background-position:center center; 
} 


<div class="sample"></div>

Просто попробуйте. Я надеюсь, что это поможет вам

источник

2015-09-01 06:37:42

Что делать, если размер экрана меньше 500 пикселей или более 500 пикселей? – niyasc

Спасибо, но размер фона: обложка обложки изображения для сохранения исходного соотношения сторон –

@niyasc это всего лишь образец –

-1

Использование

height:100% ;width:100%; background-size:contain;

сохранить соотношение фона изображения.

источник

2015-09-01 06:53:34

Вероятно, вы работаете с png, но я просто попробовал его с svg, и он не растягивается до 100% ширины, он сохраняет соотношение сторон, вероятно, есть трюк, характерный для svg. –

На самом деле .. Я просто видел, что вы написали «сохранить пропорции», я пытаюсь НЕ сохранить пропорции. –

Stretch svg background без сохранения пропорций

ответ

Смежные вопросы