设置 SVG 的纵横比 [关闭]

Question

我有许多来自流行品牌的 .svg 徽标，可用于图像轮播。我的问题是图像尺寸不同，品牌最终会像这样显示......

Argos 图像比 Apple 和 Epic 徽标小得多。理想情况下，我希望它们都具有相同的纵横比，以便它们很好地融合在一起。

如何使用 CSS 或 JavaScript 做到这一点？

Answer 1

将元素的max-width 设置为一定的像素大小。

.svg {
   max-width: 125px;
}

如果您使用百分比（50%），则宽度为 400 像素的 svg 将具有 200 像素，而宽度为 1000 像素的 svg 将具有 500 像素，因此这种方法将不起作用。

在上面的示例中，我使用.svg 类来定位它们，但您可以简单地使用svg，或者将它们放在具有所需类名的 div 中。