Как растянуть svg изображение в before на всю ширину экран?

Question

[Zhenya Tureysky]

Есть блок у него есть декоративный элемент в виде волнистого изображения

мне нужно чтоб она всегда была на всю ширину экрана но у svg в коде есть определенная ширина и из-за этого картинка становиться или в левый или в правый край и все и не растягивается на всю ширину я пробовал ставить 100% svg но нечего не получалось ставил 100% befor нечего не работает
Как мне решить это ?

.creating {
	position: relative;
	background: linear-gradient(180deg, #FFF7E0 0%, #FFFFFF 100%);
	min-height: 200px;
	width: 100%;
	max-width: 100%;
}
.creating::before {
	content: url(../images/creating-before.svg);
	position: absolute;
	top: -200px;
	right: 0;
}

Answer 1

[Ankhena]

но у svg в коде есть определенная ширина и из-за этого картинка становиться или в левый или в правый край

Ну не из-за этого, а из-за того, что по умолчанию, svg не меняет пропорции.
Но это меняется с помощью атрибута preserveAspectRatio

Comments

[Сергей delphinpro]

Или просто повесить фоном и растянуть вне зависимости от preserveAspectRatio

[Ankhena]

Сергей delphinpro, мне кажется, что svg не растянется и на фоне, но давно не проверяла.

[Zhenya Tureysky]

попробовал вроде вышло все но все ровно не понимаю как сделать чтоб svg всегда была на всю ширину нужно чтоб когда экран становился шире картинка просто делалась больше но была все ровно на всю ширину и когда экран становиться меньше то чтоб просто обрезалась без никаких скролов как это сделать ?

[Ankhena]

Zhenya Tureysky, зависит от того, как сверстано все остальное.
А пока, по вашим скринам вообще не понятно зачем там псевдо, а не просто фон.

Используя псевдо, лучше писать изображения фоном, а не через content, так управляемость заметно выше.

[sharpsss]

Zhenya Tureysky, с помощью медиа запросов "попробовал вроде вышло все но все ровно не понимаю как сделать чтоб svg всегда была на всю ширину нужно чтоб когда экран становился шире картинка просто делалась больше но была все ровно на всю ширину и когда экран становиться меньше то чтоб просто обрезалась без никаких скролов как это сделать ?"

[Максим]

Zhenya Tureysky, код svg приложите

[Zhenya Tureysky]

Максим,

<svg width="1440" height="152" viewBox="0 0 1440 152" fill="none" xmlns="http://www.w3.org/2000/svg" preserveAspectRatio="none">
<path fill-rule="evenodd" clip-rule="evenodd" d="M1468 48.1832L1468 152L-2.00006 152L-2.00005 38.8338C18.4677 45.1144 42.6716 55.8689 71.1427 72.6747C219.602 160.317 453.608 91.9468 639.951 21.1678C770.852 -28.561 896.721 18.2713 1034.96 69.6922C1093.5 91.4593 1154.25 114.058 1218.54 130.491C1318.75 156.101 1404.81 109.556 1468 48.1832Z" fill="#FFF7E0"/>
</svg>

[Максим]

Zhenya Tureysky, видите в вашем svg width и height ?удалите их и оставьте только viewBox и namespace

[Ankhena]

Zhenya Tureysky, вы можете толком объяснить что делаете? А лучше песочницу с видимой проблемой и описанием что не так.

Вот попробовала вашу картинку: она растягивается как задали.
У меня в примере высота auto, вы можете поставить фиксированную или как нужно.
https://codepen.io/AnnaSummer/pen/ExdbQjb