如何在不保持宽高比的情况下让SVG图片填满容器？

嘿，这个问题我太熟悉了！默认情况下SVG会强制保持宽高比，所以才会出现你说的居中留空白、缩放时空白也跟着变大的情况。其实只要简单调整两个地方就能解决：

方法一：修改SVG文件本身（推荐） #

直接在SVG的根元素里添加preserveAspectRatio="none"属性，这是SVG原生的控制方式，兼容性最好。

打开你的logo.svg文件，找到开头的<svg>标签，把它改成类似这样：

<svg xmlns="http://www.w3.org/2000/svg" preserveAspectRatio="none" ...>
  <!-- 你的SVG内容 -->
</svg>

修改后，不管你用什么方式引用这个SVG，它都会自动拉伸填满容器，完全忽略原始宽高比。

方法二：用CSS控制（不用改SVG文件） #

如果你不想动SVG源文件，也可以给<img>标签加上object-fit: fill样式，这是CSS层面的拉伸控制，效果和上面一样：

<img style="position: absolute; top: 12px; left: 31px; z-index: 1; width: 196px; height: 265px; object-fit: fill;" src="/media/images/logo.svg" />

补充说明 #

• preserveAspectRatio="none"会让SVG的所有内容完全拉伸适配容器的宽高，没有任何留白；
• object-fit: fill是CSS的属性，现在主流浏览器都支持，适合不能修改SVG文件的场景；
• 如果你的SVG里有某些图形元素不想被过度拉伸，可能需要微调SVG内部的坐标或布局，但如果只是要填满容器，上面两个方法就足够啦。

内容的提问来源于stack exchange，提问作者Neha Dangui