Ich möchte den nächsten Trick in meiner CSS-Datei so machen (Höhe = Breite) ohne Pixel zu setzen. Ich möchte dies tun, unabhängig von der Auflösung des Browsers, um dieselben Werte für diese beiden Dimensionen zu haben.
#test{
height: 100%;
width: (same as height);
}
Ich bevorzuge es mit CSS und nicht mit Javascript.
Vielen Dank im Voraus.
Mögliches Duplikat dieser Frage: stackoverflow.com/questions/5445491/…
– Benutzer2012084
15. Februar 2014 um 15:58 Uhr
@dpwivagg Ich glaube nicht. Das OP will width: same as height nicht height: same as width.
– Hashem Qolami
15. Februar 2014 um 16:00 Uhr
Sie können mit css nicht auf andere CSS-Anweisungen verweisen. Sie könnten weniger CSS verwenden, was Ihnen dies ermöglichen würde. lesscss.org
– Kalvin
15. Februar 2014 um 16:00 Uhr
@Hashem Qolami, ich habe es mit jquery versucht, aber das Problem ist, dass es nicht in allen Auflösungen von Smartphones funktioniert.
Fantastisch! Aber können wir es nutzen? caniuse.com/mdn-css_properties_aspect-ratio – Die derzeitige Unterstützung liegt bei etwa 70%, Safari implementiert sie im Grunde noch nicht. Wenn Sie dies verwenden, wird Ihre Website auf iPhones und Safari unterbrochen. 🤷♂️
– Eduard
16. September 2021 um 9:47 Uhr
100 Millionen Upvotes … Safari unterstützt dies jetzt … danke … das sollte die Top-Antwort sein
– danday74
2. Oktober 2021 um 21:57 Uhr
Die einzige CSS-Möglichkeit, dies im Moment zu tun (AFAIK), ist die Verwendung von Viewport-Relations-Werten (vh / vw ).
Rein % Werte funktionieren nicht als height:100% ist nicht gleich width:100% da sie sich auf verschiedene Dinge beziehen, die die relevanten Dimensionen des Elternteils sind.
Ich denke, das ist es, was ich wirklich will. Ich werde es versuchen. Danke
– Giorgos
15. Februar 2014 um 16:57 Uhr
Irgendeine Idee, wie man solche positioniert .box Element innerhalb seines übergeordneten Elements, sodass es sowohl horizontal als auch vertikal zentriert ist?
– Michal Hosala
1. Oktober 2015 um 18:06 Uhr
Auf SO gibt es viele Antworten darauf. Einfach mal suchen.
– Paulie_D
1. Oktober 2015 um 18:20 Uhr
Entschuldigung, ich hatte einen Fehler in meinem Code, dank dessen mein Favorit margin: auto; position: absolute; top, bottom, right, left: 0; Die Lösung funktionierte nicht, daher die Frage – ich habe die Schuld gegeben vw dafür.
– Michal Hosala
2. Oktober 2015 um 0:06 Uhr
@Paulie_D – für diese Frage gibt es nicht “viele Antworten”. und diese Lösung ist nicht korrekt, da sie nicht den Titel beantwortet, sondern ein sehr spezifisches Szenario beantwortet. Ich bin hierher gekommen, um eine Antwort auf den Titel zu suchen, und habe nichts bekommen :/
– vsync
5. Juni 2017 um 15:58 Uhr
Eine weitere Option ist zu machen Seitenverhältnis verwenden Bild Element Verhalten
Hier verwende ich SVG Bild und inline es mit Daten-URL um es einfacher zu machen
Um das gewünschte Seitenverhältnis zu beschreiben, können Sie verwenden viewBox svg-Attribut viewBox='0 0 width-ratio height-ratio'
Bitte klären Sie die Verwendung von “html”, ich konnte es weder in W3School noch in irgendeiner anderen Dokumentation finden
– vikramvi
9. Juli 2020 um 10:34 Uhr
Für alle, die wegen des Fragetitels hierher gekommen sind, ist dies die Antwort, nach der Sie suchen. Sie verwenden ein untergeordnetes Bild-Tag mit einem Verhältnis von 1:1 und machen die Breite des übergeordneten Auto-Tags. Für die Leute, die aus Unwissenheit “mögliches Duplikat” posten, ist es kein Duplikat, da der prozentuale Polsterungstrick auf die Breite des Elternteils und nicht auf die Höhe geht. Es funktioniert also nur, wenn Sie versuchen, die Höhe an die Breite anzupassen, nicht umgekehrt
– DanceSC
10. Mai 2021 um 18:53 Uhr
Die Eigenschaft Seitenverhältnis ist technisch der beste Weg, wird aber nur in neueren Versionen einiger Browser unterstützt. Dieser ist im Moment der Beste.
– SRCP
12. Dezember 2021 um 21:58 Uhr
maximale Breite / maximale Höhe hat bei mir funktioniert:
Ein Bild bestimmter Größe wird in ein div (.box) gesetzt.
Mögliches Duplikat dieser Frage: stackoverflow.com/questions/5445491/…
– Benutzer2012084
15. Februar 2014 um 15:58 Uhr
@dpwivagg Ich glaube nicht. Das OP will
width: same as height
nichtheight: same as width
.– Hashem Qolami
15. Februar 2014 um 16:00 Uhr
Sie können mit css nicht auf andere CSS-Anweisungen verweisen. Sie könnten weniger CSS verwenden, was Ihnen dies ermöglichen würde. lesscss.org
– Kalvin
15. Februar 2014 um 16:00 Uhr
@Hashem Qolami, ich habe es mit jquery versucht, aber das Problem ist, dass es nicht in allen Auflösungen von Smartphones funktioniert.
– Giorgos
15. Februar 2014 um 16:11 Uhr