Как добиться необходимой высоты для изображения?

Question

[Alina1984]

Добрый день. Подскажите пожалуйста как мне добиться для елемента декора, который расположен внизу вюпорта чтобы его высота составляла 202px. Проблема состоит в том, что когда пытаюсь задать для него данную высота он у меня сужается а мне надо чтобы он был на вю ширину вюпорта. Без задания высоты когда он растянт на всю ширину, его высота составляет 263px



Ссылка на верстку https://codepen.io/NastyaVs/pen/ExqQxJJ

Comments

[Ankhena]

В вашем коде нет ни одного упоминания числа 202.

Допишите height: 202px;

p.s.
1. Лучше бы этот "футер" с картинкой прибивать гридами или флексами. Гуглите стики футер.
Чтобы случайно не налез на контент.
2. И всё таки это не контентная картинка. Alt waves даром не сдался ни пользователям скринридеров ни хозяевам сайта для продвижения. Такие картинки либо убирают в стили (лучше) либо скрывают от скринридеров с помощью aria-hidden. И, соответственно, убирают alt (оставляют пустым)
3. Глаже будет SVG

[Alina1984]

"Допишите height: 202px;" - Я же написала выше, что когда задаю данную высоту картинка сжимается и уже не растягивается на всю ширину вюпрорта

[Alina1984]

[Alina1984]

Вот что получается при height: 202px

[Alina1984]

1. Лучше бы этот "футер" с картинкой прибивать гридами или флексами. Гуглите стики футер.
Чтобы случайно не налез на контент. - это не футер. Это один блок. Я же выложила ссылку на https://codepen.io/NastyaVs/pen/ExqQxJJ

[Aleksey Solovyev]

Не совсем понимаю задачу. Просто добавил height: 202px:


Картинка волны всегда 202px на всех экранах. У Вас баг какой-то? Какой браузер используете?

update: проблема могла бы быть с svg картинкой, которая изначально пропорционально масштабируется. В это случае можно указать preserveAspectRatio в значение none, чтобы отключить равномерное масштабирование

[Ankhena]

Alina1984,

Вот что получается при height: 202px

А теперь добавьте это в песочницу.
Потому что, когда это делаю я, то получается всё как нужно.
И судя по комментарию выше, так получается не только у меня.

[Alina1984]

Ankhena,

Залито на Git
https://gkonstantinvua.github.io/dist-test/

[Alina1984]

Aleksey Solovyev,
Картинка волны всегда 202px на всех экранах. У Вас баг какой-то? Какой браузер используете?

Тестировалось и в Chrome и в Mozilla

[Alina1984]

Aleksey Solovyev,
Картинка волны всегда 202px на всех экранах. У Вас баг какой-то? Какой браузер используете?

то что у меня

[Ankhena]

Alina1984, Ну как так-то?
В песочнице png, на гитхабе svg.
SVG по умолчанию не меняет пропорции, что бы ему не указывали в размерах. Чтобы изменить это поведение, нужно задать атрибут preserveAspectRatio="none"