Andrew Welch hatte neulich eine kleine CSS-Herausforderung, um ein gewöhnliches Div zu machen
• vertikal + horizontal zentriert
• passt sich an den Viewport an mit einem Rand drumherum
• behält ein beliebiges Seitenverhältnis bei
• Kein JS
In diesem Tweet gibt es ein Video, das vielleicht hilft, die Herausforderung zu visualisieren. Ich habe gesehen, wie Paul Bakaus kürzlich darüber bloggte, also ist das ein Thema, das immer wieder auftaucht!
Mark Huot wurde kreativ und wendete Seitenverhältnisse direkt mit width/height an und erzeugte die Ränder durch Subtraktion dieser Abmessungen
Die Idee von Amelia Wattenberger ist, sowohl height/width als auch max-height/max-width mit Viewport-Einheiten festzulegen und es mit dem klassischen translate-Trick zu zentrieren
Eric A. Meyer hat das Gleiche getan, nur mit Flexbox stattdessen zentriert.
Brian Hart verwendete vmin-Einheiten für die Seitenverhältnis-Größe und zentrierte es mit Flexbox
Benoît Rouleau hat das Gleiche getan, aber calc() für die Ränder in einer anderen Einheit verwendet.
Andrew mag Jonathon Melvilles Ansatz sehr. Das meiste davon ist in Tailwind-Klassen, daher ist es für mich etwas schwer zu verstehen, da ich es noch nicht gewohnt bin, Code so anzusehen.
Andrew sagte, er habe sich letztendlich für die vmin-Sache entschieden – obwohl ich sehe, dass er calc() verwendet, um vmin-Einheiten voneinander zu subtrahieren, was nicht wirklich notwendig ist, es sei denn, man möchte die Mathematik sehen, nehme ich an.
Ich mag die Lösung, die Breite/Höhe zusammen mit gegenüberliegenden max-Breite/max-Höhe verwendet – diese Lösung ist wahrscheinlich die beste Option für die Kompatibilität mit älteren Browsern. Aber da dies ziemlich genau dem dient, wofür die vmin-Einheit gedacht ist, würde ich sagen, dass dies wahrscheinlich die beste Lösung ist.