使用svg图像保留Internet Explorer上的宽高比

Question

我有一个名为image.scgz的svgz图像，它具有指定的宽度和高度。

我想制作宽度为120像素并保持纵横比的拇指图像。

在Chrome上，我只需要写<img src="image.svgz" style="width:120px;" />

然而它不适用于9＆amp; 10：

• 首先，我必须写<img src="image.svgz" style="max-width:120px;" />来缩放宽度，我不明白逻辑。

• 其次不保持宽高比

我已经看过使用balise svg的preserveAspectRatio属性的解决方案，但我不想修改我的图像文件。

Answer 1

您必须使用SVG <image>元素而不是HTML <img>元素，因为SVG <image>元素可以采用html <img>的preserveAspectRatio和viewBox属性元素不支持。