如何调整底部有SVG的元素的高度,使其在所有宽度上都看起来很好?

我试图在我的元素底部有一个‘波浪’的效果,有一个背景图像在CSS中,但是我已经让它与Height:Auto一起工作得很好;但是我希望图像的高度更大.然而,当我添加一个高度时,SVG不再粘在元素的底部,而是略高于底部.

我是新手,所以这对我来说有点头疼.

.svg-container {
    top: 100;
    left: 0;
    width: 100%;
    background-image: url('essex-builder-bathroom.png');
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center;
}

    #visual {
        width: 100%;
        height: auto; 
        /* If set to a fixed value, eg 500px, it will cause it to not scale properly */
    }
<div class="svg-container bg-primary">
    <svg id="visual" viewBox="0 0 3840 800" width="3840" xmlns="http://www.w3.org/2000/svg"
        xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1">
        <path
        d="M0 551L91.5 557.5C183 564 366 577 548.8 573.8C731.7 570.7 914.3 551.3 1097.2 542.7C1280 534 1463 536 1645.8 538.3C1828.7 540.7 2011.3 543.3 2194.2 552C2377 560.7 2560 575.3 2742.8 584C2925.7 592.7 3108.3 595.3 3291.2 594.5C3474 593.7 3657 589.3 3748.5 587.2L3840 585L3840 801L3748.5 801C3657 801 3474 801 3291.2 801C3108.3 801 2925.7 801 2742.8 801C2560 801 2377 801 2194.2 801C2011.3 801 1828.7 801 1645.8 801C1463 801 1280 801 1097.2 801C914.3 801 731.7 801 548.8 801C366 801 183 801 91.5 801L0 801Z"
        fill="#2c2b2b"></path>
    <path
        d="M0 654L91.5 657.3C183 660.7 366 667.3 548.8 668.7C731.7 670 914.3 666 1097.2 648.2C1280 630.3 1463 598.7 1645.8 585.7C1828.7 572.7 2011.3 578.3 2194.2 593.5C2377 608.7 2560 633.3 2742.8 643.5C2925.7 653.7 3108.3 649.3 3291.2 652C3474 654.7 3657 664.3 3748.5 669.2L3840 674L3840 801L3748.5 801C3657 801 3474 801 3291.2 801C3108.3 801 2925.7 801 2742.8 801C2560 801 2377 801 2194.2 801C2011.3 801 1828.7 801 1645.8 801C1463 801 1280 801 1097.2 801C914.3 801 731.7 801 548.8 801C366 801 183 801 91.5 801L0 801Z"
        fill="#1a1919"></path>
    <path
        d="M0 716L91.5 711.8C183 707.7 366 699.3 548.8 689.2C731.7 679 914.3 667 1097.2 664.3C1280 661.7 1463 668.3 1645.8 670C1828.7 671.7 2011.3 668.3 2194.2 673.8C2377 679.3 2560 693.7 2742.8 695.5C2925.7 697.3 3108.3 686.7 3291.2 684.8C3474 683 3657 690 3748.5 693.5L3840 697L3840 801L3748.5 801C3657 801 3474 801 3291.2 801C3108.3 801 2925.7 801 2742.8 801C2560 801 2377 801 2194.2 801C2011.3 801 1828.7 801 1645.8 801C1463 801 1280 801 1097.2 801C914.3 801 731.7 801 548.8 801C366 801 183 801 91.5 801L0 801Z"
        fill="#000000"></path>
    </svg>
</div>

推荐答案

我已经我已经知道你想要达到什么目的了.

如果将以下属性添加到中,则会将

preserveAspectRatio="none"

width="100vw"

height="100vh"

* {
  margin: 0;
  padding: 0;
}
.svg-container {
    position: relative;
    height: 100%;
    top: 100;
    left: 0;
    width: 100%;
    background-image: url('essex-builder-bathroom.png');
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center;
}
<div class="svg-container bg-primary">
    <svg 
         id="visual" 
         viewBox="0 0 3840 800" 
         preserveAspectRatio="none"
         width="100vw"
         height="100vh"
         xmlns="http://www.w3.org/2000/svg"
        xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1">
        <path
        d="M0 551L91.5 557.5C183 564 366 577 548.8 573.8C731.7 570.7 914.3 551.3 1097.2 542.7C1280 534 1463 536 1645.8 538.3C1828.7 540.7 2011.3 543.3 2194.2 552C2377 560.7 2560 575.3 2742.8 584C2925.7 592.7 3108.3 595.3 3291.2 594.5C3474 593.7 3657 589.3 3748.5 587.2L3840 585L3840 801L3748.5 801C3657 801 3474 801 3291.2 801C3108.3 801 2925.7 801 2742.8 801C2560 801 2377 801 2194.2 801C2011.3 801 1828.7 801 1645.8 801C1463 801 1280 801 1097.2 801C914.3 801 731.7 801 548.8 801C366 801 183 801 91.5 801L0 801Z"
        fill="#2c2b2b"></path>
    <path
        d="M0 654L91.5 657.3C183 660.7 366 667.3 548.8 668.7C731.7 670 914.3 666 1097.2 648.2C1280 630.3 1463 598.7 1645.8 585.7C1828.7 572.7 2011.3 578.3 2194.2 593.5C2377 608.7 2560 633.3 2742.8 643.5C2925.7 653.7 3108.3 649.3 3291.2 652C3474 654.7 3657 664.3 3748.5 669.2L3840 674L3840 801L3748.5 801C3657 801 3474 801 3291.2 801C3108.3 801 2925.7 801 2742.8 801C2560 801 2377 801 2194.2 801C2011.3 801 1828.7 801 1645.8 801C1463 801 1280 801 1097.2 801C914.3 801 731.7 801 548.8 801C366 801 183 801 91.5 801L0 801Z"
        fill="#1a1919"></path>
    <path
        d="M0 716L91.5 711.8C183 707.7 366 699.3 548.8 689.2C731.7 679 914.3 667 1097.2 664.3C1280 661.7 1463 668.3 1645.8 670C1828.7 671.7 2011.3 668.3 2194.2 673.8C2377 679.3 2560 693.7 2742.8 695.5C2925.7 697.3 3108.3 686.7 3291.2 684.8C3474 683 3657 690 3748.5 693.5L3840 697L3840 801L3748.5 801C3657 801 3474 801 3291.2 801C3108.3 801 2925.7 801 2742.8 801C2560 801 2377 801 2194.2 801C2011.3 801 1828.7 801 1645.8 801C1463 801 1280 801 1097.2 801C914.3 801 731.7 801 548.8 801C366 801 183 801 91.5 801L0 801Z"
        fill="#000000"></path>
    </svg>
</div>

Html相关问答推荐

为什么在这种情况下是弹性基础:自动不解决内容的大小?

应用于文本而不是弹性容器的Flexbox属性

CSS自定义特性中的URL是否可以相对于定义的CSS文件?

需要关于HTML的建议

仅在加载视频时显示描述(<;Video>;标签)

为什么我的搜索栏会出现在WONG位置?

是否可以部分列出一个HTML有序列表

我应该怎么做才能显示出整个字符串?

窗口视图之外的下拉菜单位置

背景可点击,而不是文本

我怎样才能有一个div,在其中放置一个消息,打破和不go 的div?

防止position:relative的child在出界时收缩

我无法动态嵌入Instagram帖子,因为无法分配Instagram固定链接

减小HTML负载中base64字符串的大小

仅 Select 悬停的级别,而不 Select 其父级或子级

perl hdb 调试器:浏览器以错误的编码显示 UTF-8 源代码

CSS 字母间距将按钮向右扩展

拨动switch 在重新加载时未重置

增加第一个字母的大小不再正确居中文本

沿文本对齐双引号