如何用CSS实现Banner中SVG背景在任意屏幕尺寸下的响应式显示？

你当前代码里的background-size: cover是问题根源——这个属性会强制拉伸SVG填满容器，一旦容器的宽高比和SVG本身不一致，图片就会被裁剪，自然没法完整显示。

把代码改成下面这样就能解决：

.banner {
    background: url("../../assets/images/auth/plantATree.svg") center center no-repeat;
    background-size: contain; /* 替换原有的cover */
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;

    @media screen and (max-width: 752px ) {
      display: none;
    }
}

简单解释下关键修改：

• background-size: contain：会让SVG保持自身宽高比，完整适配容器的可用空间，不会裁剪任何部分
• 新增no-repeat：避免SVG在容器的空白区域重复显示
• 保留center center：确保SVG始终在容器居中位置

这样不管浏览器怎么缩放，SVG都能完整展示在Banner里。

内容的提问来源于stack exchange，提问作者Alex Ramirez