解决 SVG 作为 CSS 背景图无法 background-size: 100% 100% 拉伸的问题

品克缤2026-03-18 9:58

在 Vue 或 Element Plus 项目中，为容器（如 .el-table__header）设置 SVG 背景图时，即使指定了 background-size: 100% 100%，SVG 依然保持原始比例，导致两侧留白或显示不全，无法自适应拉伸。

css 复制代码

/* 预期拉伸铺满，实际失效 */
.el-table__header {
    background: url('@/assets/img/table_head_bg.svg') no-repeat;
    background-size: 100% 100%; 
}

这是由 SVG 内部的 preserveAspectRatio 属性决定的。

SVG 默认开启了等比缩放模式（类似于 object-fit: contain），它会优先保持自身的宽高比，从而忽略外部 CSS 的强行拉伸指令。

直接修改 .svg 源文件，在 <svg> 根标签上添加属性：preserveAspectRatio="none"。

bash 复制代码

<svg width="1808" height="48" viewBox="0 0 1808 48" ...>

bash 复制代码

<svg width="1808" height="48" viewBox="0 0 1808 48" preserveAspectRatio="none" ...>

添加该属性后，SVG 将彻底放弃对自身比例的坚守，完美听从 CSS background-size: 100% 100% 的调遣，实现任意维度的自适应铺满。