保持svg纵横比，并缩放到最小轴

Question

我有一个设置为100％宽度的svg，填充容器。容器设置为主体的100％，因此当浏览器窗口在x轴上变窄时，svg会收缩，使其保持100％宽度并相应地缩小。

然而，当我然后缩小y轴上的窗口时，svg保持不变。我希望它始终保持有限的比例（即。在所有情况下保持1：1的正方形），但缩放为最小轴的100％。

.svg-container {
    position: relative;
    width: 100%;
    height: 100%;
}


.svg {
    width: 100%;
    height: 100%;
}

目前，它在任一轴上都会收缩，但无论如何都会变成矩形，从而无法保持原始宽高比的目标。

任何人都可以提供保持宽高比的解决方案，并在视口上保持100％的最小轴吗？

Answer 1

我想，因为你的容器是页面高度的100％，你的.svg会被压扁。试试这个......

   .svg-container {
        position: relative;
        width: 100%;
        height: auto;
    }