图像具有固定高度和100％宽度

Question

我真的不能让这个图像在固定高度水平拉伸100％。我不关心失真，因为它只是一个svg模式。我已尝试使用img-tag和div，svg作为背景，但似乎没有任何效果。我现在得到的是：

＆＃13;

＆＃13;

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

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;

编辑：

澄清的屏幕截图

Answer 1

如果不扭曲图像，您将无法完成此操作。创建此“外观”的唯一方法是允许图像水平缩放并使用包含元素来指定最大高度，最终导致切割部分图像。

编辑：

  

代替想要失真的操作，最好的方法是设置宽度为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; }

Answer 2

使用

height:100vh; 

它的vieport高度。

还有vw for vieport witdth。

但请注意，尤其是ios无法处理..所以对于ios设备设置固定的高度。

some further informations about vh

can i use vw, vh?

问候timotheus

Answer 3

这应该这样做：

background-size: 100% 50px;

编辑：PimBrouwers打败了我。