Добрый день. Подскажите пожалуйста как мне добиться для елемента декора, который расположен внизу вюпорта чтобы его высота составляла 202px. Проблема состоит в том, что когда пытаюсь задать для него данную высота он у меня сужается а мне надо чтобы он был на вю ширину вюпорта. Без задания высоты когда он растянт на всю ширину, его высота составляет 263px
p.s.
1. Лучше бы этот "футер" с картинкой прибивать гридами или флексами. Гуглите стики футер.
Чтобы случайно не налез на контент.
2. И всё таки это не контентная картинка. Alt waves даром не сдался ни пользователям скринридеров ни хозяевам сайта для продвижения. Такие картинки либо убирают в стили (лучше) либо скрывают от скринридеров с помощью aria-hidden. И, соответственно, убирают alt (оставляют пустым)
3. Глаже будет SVG
1. Лучше бы этот "футер" с картинкой прибивать гридами или флексами. Гуглите стики футер.
Чтобы случайно не налез на контент. - это не футер. Это один блок. Я же выложила ссылку на https://codepen.io/NastyaVs/pen/ExqQxJJ
Не совсем понимаю задачу. Просто добавил height: 202px:
Картинка волны всегда 202px на всех экранах. У Вас баг какой-то? Какой браузер используете?
update: проблема могла бы быть с svg картинкой, которая изначально пропорционально масштабируется. В это случае можно указать preserveAspectRatio в значение none, чтобы отключить равномерное масштабирование
А теперь добавьте это в песочницу.
Потому что, когда это делаю я, то получается всё как нужно.
И судя по комментарию выше, так получается не только у меня.
Alina1984, Ну как так-то?
В песочнице png, на гитхабе svg.
SVG по умолчанию не меняет пропорции, что бы ему не указывали в размерах. Чтобы изменить это поведение, нужно задать атрибут preserveAspectRatio="none"
