保持 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;
    }