我正在尝试为多种用途制作完整的宽幅元素，并且正在使用svg作为背景图形。我将使用它来嵌套标题，表格或其他任何东西。
这个想法是，图形将始终保持屏幕边缘到屏幕的100％宽度，当内容强制元素高度扩展时，将水平重复并缩放。
到目前为止，它已经解决了问题，但这里存在一个问题：图形（https://imgur.com/a/SK3SxTi）的顶部和底部边缘不均匀。我想要确保元素的内容不会出现在填充的外部。我以为我只是将padding的top / bottom设置为20％并每天调用一次，但它根本无法按我希望的那样工作。
我希望这个“填充”保持元素总高度的20％，无论它有多高或宽。
.fullwidth {
width:100%;
background-image: url(graphic.svg);
background-repeat: repeat-x;
background-size: auto 100%;
padding:20% 0;
}
.content {
...
}
结果是存在填充，但不是恒定的。相反，它随屏幕的宽度而变化。我已经尝试了各种方法来使它起作用，但是我无法自己解决这个问题。