具有固定高度和100％寬度的圖像

Question

我真的無法獲得此圖像以固定高度水平拉伸100％。 我不在乎失真，因為它只是svg模式。 我已經嘗試過使用img-tag和div以及svg作為背景，但是似乎沒有任何效果。 我現在得到的是：

 .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> 

編輯：

截圖以澄清

Answer 1

您將無法完成此操作而不會扭曲圖像。 創建此圖像的“外觀”的唯一方法是允許圖像水平縮放，並使用包含元素指定最大高度，最終導致圖像的一部分被切掉。

編輯：

代替op想要的失真，最好的方法是將背景尺寸設置為寬度為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 witdth也有大眾。

但請特別注意ios無法處理它。.因此，為ios設備設置一個固定的高度。

有關vh的更多信息

我可以使用大眾，大眾嗎？

timotheus的問候

Answer 3

應該這樣做：

background-size: 100% 50px;

編輯：PimBrouwers擊敗了我。