Ansichtsfenster-Einheiten, Seitenverhältnis beibehalten?

Ich habe gerade Ansichtsfenster-Einheiten entdeckt und möchte sie unbedingt verwenden.

Erste Herausforderung: Mein Element hat eine "Grundgröße" von 760x670 Pixel. Ich möchte Ansichtsfenster-Einheiten verwenden, um es so zu skalieren, dass entweder die Höhe ist100vhoder die Breite ist100vw, je nachdem was kleiner ist.

Leider, obwohl ich verwenden kann100vmin um das kleinere von beiden zu bekommen, kann ich es nur auf die Breite oder die Höhe anwenden, nicht auf beide.

Derzeit verwende ich:

#root {
    width: 760px;
    height: 670px;
    width: 100vw;
    height: calc(670vw/760);
}

Dadurch wird die Breite an den Bildschirm angepasst, was zu einem vertikalen Bildlauf führt. Das ist nicht so schlimm, aber ich würde es vorziehen, wenn ich es tatsächlich in das Ansichtsfenster passen könnte.

Antworten auf die Frage(1)

Ihre Antwort auf die Frage