Как сделать непропорциональное изменение размеров изображения svg?

Question

[IvanRivan]

Есть картинка допустим 100px по ширине и 50px по высоте.
Нужно чтобы она растянулась по ширине на всю ширину окна браузера, а по высоте осталась 50px и таким образом растянулась с искажением. Не фон замостил повторяющейся картинкой по ширине, а именно размазалась растянулась картинка с искажением? background-size: 100% 50px; в стиле бэкграунда не работает.

Answer 1

[andand44]

background-size: 100% 50px; работает
https://jsfiddle.net/ewc7nusf/1/

Comments

[IvanRivan]

https://jsfiddle.net/juo4vm70/
У меня svg картинка. Эти правила не работают в отношении svg или что я делаю не так?

[Aetae]

IvanRivan, img - это элемент. У него нет background. Это картинка сама по себе.

[andand44]

В svg viewbox мешает. Если его убрать, то все растягивается. https://jsfiddle.net/34xht0ka/
Есть и более правильные варианты решения проблемы https://css-tricks.com/scale-svg/

Answer 2

[Максим]

Вставьте к себе этот (исправленный) код svg к себе в img и отпишитесь - работает или нет :https://codepen.io/topicstarter/pen/bGraopB

Comments

[Капитан Какао]

Вся соль в preserveAspectRatio="none"

Для начала нужно добавить эту строку в svg что бы было так

<svg preserveAspectRatio="none" viewBox=...

А после этого уже можете конвертировать его в base64, но лучше не делать этого. SVG можно подключать как обычное изображение через <img src="пусть_к_изображению.svg" />

[Максим]

Капитан Какао, я так и сделал, вам надо было писать ни мне а ответом