Pflegen Sie Svg-Seitenverhältnis, und skalieren Sie auf die kleinste Achse

Question

Ich habe eine SVG, die auf 100% Breite eingestellt ist, einen Container zu füllen. Der Container wird auf 100% des Körpers gesetzt, so dass bei einer Verengung des Browserfensters auf der X-Achse der Svg schrumpft, so dass er auf 100% Breite bleibt und entsprechend verkleinert.

Wenn ich jedoch dann verkleinern Sie das Fenster auf der Y-Achse, die Svg bleibt, wie es ist. Ich möchte, dass es immer mit beschränkten Proportionen bleibt (, d. H. ein Quadrat, das unter allen Umständen bei 1: 1 bleibt), aber skaliere auf 100% der kleinsten Achse.

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


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

Im Moment schrumpft es entweder auf der Achse, aber es wird so oder so wird rechteckig, mein Ziel zu besiegen, das ursprünglichen Seitenverhältnis beibehalten wird.

Kann jemand eine Lösung anbieten, die das Seitenverhältnis beibehält, sowie 100% der kleinsten Achse im Ansichtsfenster behält?

Answer 1

ich denken, weil Ihr Behälter 100% der Höhe Seite ist, ist Ihr .svg zerquetscht zu werden. Versuchen Sie dies ...

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