css - 元素填充顶部/底部占当前高度的百分比

Question

我正在尝试为多种用途制作一个完整的宽元素，并且我使用 svg 作为背景图形。我会用它来嵌套标题、表格或任何东西。

这个想法是，图形将始终保持 100% 宽的屏幕边缘，当其内容迫使元素以高度扩展时，水平重复和缩放。

到目前为止已经弄清楚了，但问题出在：图形（https://imgur.com/a/SK3SxTi）的顶部和底部边缘不均匀。我想要的是确保元素的内容不会出现在填充之外。我以为我只需将元素填充顶部/底部设置为 20% 并称其为一天，但它根本无法像我希望的那样工作。

我希望这个“填充”保持元素总高度的 20%，无论它有多高或多宽。

.fullwidth {
width:100%;
background-image: url(graphic.svg);
background-repeat: repeat-x;
background-size: auto 100%;
padding:20% 0;
}

.content {
...
}

结果是有一个填充，但它不是恒定的。相反，它会随着屏幕的宽度而变化。我已经尝试了各种方法来使它工作，但我根本无法自己解决。

标签： css