Изображение с фиксированной высотой и шириной 100%

Я действительно не могу получить это изображение, чтобы растянуть на 100% горизонтально с фиксированной высотой. Меня не волнует искажение, потому что это всего лишь шаблон svg. Я пробовал оба с img-тегом и div, с svg в качестве фона, но ничего не работает. То, что я получил сейчас это:Изображение с фиксированной высотой и шириной 100%

.divider{ 
 
    width: 100%; 
 
    height: 50px; 
 
    position: absolute; 
 
    left: 0; 
 
    bottom: 0; 
 
    background: url(../images/wave.svg); 
 
    background-repeat:no-repeat; 
 
    background-size: auto 50px; 
 
}

<div class="divider"></div>

EDIT:

Скриншот для осветления

источник

2016-03-14 bjarkof

Вы не сможете сделать это без искажения изображение. Единственным способом создания «внешнего вида» этого является разрешение изображения по горизонтали и использование содержащего элемента для определения максимальной высоты, что в конечном итоге приведет к вырезанию части изображения.

РЕДАКТИРОВАТЬ:

Вместо операционной желающего искажения, лучший способ установить фоновый размер с шириной 100% и фиксированной высоту 50px

Фидл: https://jsfiddle.net/2hu74z8k/

<div class="image-height-fixed"></div> .image-height-fixed { width: 100%; min-height: 50px; max-height: 50px; background-image: url(https://placeholdit.imgix.net/~text?txtsize=13&txt=500%C3%9750&w=500&h=50); background-size: 100% 50px; }

источник

2016-03-14 15:14:41 pimbrouwers

Я только что добавил скриншот к моему вопросу. Я ХОЧУ заставить его искажаться. Это волнистый разделитель для моих разделов, и когда я делаю это на 100% ширине, он слишком высок. Я просто хочу, чтобы он заполнил ширину экрана с фиксированной высотой. – bjarkof

Спасибо за дополнительную информацию. Я обновил фрагмент кода и Fiddle. – pimbrouwers

Он по-прежнему не работает так, как предполагалось, это отрывки от нижней части SVG. http://i.imgur.com/wmOWOrt.png – bjarkof

height:100vh;

его высота над уровнем моря.

есть также vw для vieport witdth.

но обратите внимание, особенно на ios can not handle it .. поэтому для устройств ios установлена фиксированная высота.

some further informations about vh

can i use vw, vh?

приветствия Тимофея

источник

2016-03-14 15:16:33

Спасибо за ваш ответ, но мне нужно как можно больше поддержки браузера, поэтому, к сожалению, это не вариант. – bjarkof

его лучший способ с css .. в противном случае вы должны использовать javascript –

Это следует сделать это:

background-size: 100% 50px;

EDIT: PimBrouwers бить меня к нему.

источник

2016-03-14 15:33:04 eliland

Изображение с фиксированной высотой и шириной 100%

ответ

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