internet-explorer - 使用 svg 图像在 Internet Explorer 上保留纵横比

Question

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

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

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

但是它不适用于 9 和 10：

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

• 其次，纵横比没有保持

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

Answer 1

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