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

Question

我有一个设置为 100% 宽度的 svg，填满了一个容器。容器设置为 body 的 100%，这样当浏览器窗口在 x 轴上变窄时，svg 会缩小以保持 100% 宽度并相应缩小。

但是，当我然后 缩小 y 轴上的窗口时，svg 保持原样。我希望它始终保持受限比例(即在任何情况下都保持 1:1 的正方形)，但缩放为最小轴的 100%。

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


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

目前，它在任一轴上都缩小了，但无论哪种方式都会变成矩形，这违背了我保持原始纵横比的目标。

谁能提供一种既能保持宽高比又能保持视口(viewport)上最小轴 100% 的解决方案？

Answer 1

我认为，因为您的容器是页面高度的 100%，所以您的 .svg 被压扁了。试试这个...

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