Feste Seitenverhältnisse bei responsiven HTML-Elementen

[Jörg]

Hallo Experten!

Mein Problem ist: Ich möchte responsive Boxen erzeugen, bei denen Breite und Höhe in einem vorgegebenen Größenverhältnis stehen, als Beispiel nehmen wir ein Quadrat.

Eine Möglichkeit gäbe es sicherlich mit vw, also sowohl width als auch height mit dem gleichen vw-Wert. Aber dann hängt halt alles an der Breite des Viewports, was in manchen Fällen nicht wünschenswert ist.

Wenn ich z.B. width:20% angebe - wie kriege ich es hin, dass die Höhe der Box gleich groß ist wie die Breite?

Auf einer anderen Seite habe ich gelesen, dass man das mit padding-bottom hinkriegt, also z.B. div style="background-color:green; width:20%; padding-bottom:20%;"

Das funktioniert. Weil sich - so die dortige Begründung - die padding-Größe, wenn sie in % angegeben ist, an derselben Basis wie width orientiert.

Aber ist das sauber?? Ist das definierter Standard? Oder gibt es bessere Lösungen?

Vielen Dank schon im Voraus!

[Gunnar Bittersmann]

@@Jörg

Aber ist das sauber??

Naja, eher ein Hack, solange es nichts Besseres gibt. (s.u.)

Ist das definierter Standard?

Dass sich Prozentangaben auch für vertikales Padding auf die Breite beziehen, ist im Standard so definiert.

Oder gibt es bessere Lösungen?

Ja: die aspect-ratio-Eigenschaft. Demnächst auch in Ihrem Browser.

😷 LLAP

[Rolf B]

Hallo Gunnar,

Demnächst auch in Ihrem Browser.

Und wann in Deinem 😜

Rolf

[Jörg]

Vielen Dank! Ich kann leider nicht mit Punkten bewerten (nicht angemeldet), aber eine vollumfängliche und ganz klare Antwort auf alle meine Fragen!

[Henry]

Hallo Jörg,

Vielen Dank! Ich kann leider nicht mit Punkten bewerten (nicht angemeldet), aber eine vollumfängliche und ganz klare Antwort auf alle meine Fragen!

Ich hätte aber auch noch ein Frage an dich. Hast du ein Beispiel, was du meinst, Gunnar hat es zwar offensichtlich verstanden, ich versteh aber noch nicht was du meinst mit 20% wären kein Problem vh aber schon.

Dann, an alle, zum Thema Aspect-ratio habe ich mal versucht zu simulieren. Das geht so aber nicht, selbst wenn ich das onresize im body-tag unterbringe. Es funktioniert aber sehr wohl, wenn ich onresize in onclick ändere, sobald man das div versucht zu strecken. Wie kriege ich das hin, dass auch onresize funktioniert?

Gruss
Henry

[Matthias Scharwies]

Servus!

Hallo Jörg,

Vielen Dank! Ich kann leider nicht mit Punkten bewerten (nicht angemeldet), aber eine vollumfängliche und ganz klare Antwort auf alle meine Fragen!

Ich hätte aber auch noch ein Frage an dich. Hast du ein Beispiel, was du meinst, Gunnar hat es zwar offensichtlich verstanden, ich versteh aber noch nicht was du meinst mit 20% wären kein Problem vh aber schon.

Das ist der padding-bottom-height-fix:

CSS/Tutorials/Abstand/padding#Padding-bottom_height_fix

Das Quadrat (oder eben die Fläche im festen 16:9 -Verhältnis) könntest du dann mit einem Hintergrundbild füllen.

Dann, an alle, zum Thema Aspect-ratio habe ich mal versucht zu simulieren. Das geht so aber nicht, selbst wenn ich das onresize im body-tag unterbringe. Es funktioniert aber sehr wohl, wenn ich onresize in onclick ändere, sobald man das div versucht zu strecken. Wie kriege ich das hin, dass auch onresize funktioniert?

Gruss
Henry

Herzliche Grüße

Matthias Scharwies

[Jörg]

Hallo Henry,

also ich habe es so gemeint:

Ich will eine quadratische Box erzeugen. Das gelingt mit den Angaben width:20vw;height:20vw

Aber dann orientieren sich Höhe und Breite halt am Viewport, was ich eventuell nicht will.

Wenn ich die Größe der Box am Elternelement ausrichten will, z.B. am body, dann gebe ich an: width:20%

So, aber wie kriege ich dann trotzdem eine quadratische Box hin. height:20% führt jedenfalls nicht zum gewünschten Ergebnis, da das Elternelement selten gleich breit wie hoch ist.

Das geht nur mit dem "Hack" oder - wie Gunnar vorgeschlagen hat - ich warte noch 5-10 Jahre auf neue Browser...

[Henry]

Hallo Jörg,

also ich habe es so gemeint:

soweit komme ich noch mit. Aber das geht doch nur solange das Containerelement dazu passt und dann auch nur wenn dir der Inhalt in dem Quadrat keinen Strich durch die Rechnung macht, oder?

Also bei mir gibts kein Quadrat, wo ist mein Verständnisfehler?

Gruss
Henry

[Rolf B]

Hallo Henry,

das ist eh alles Mist und funktioniert nur für inhaltslose divs ohne weiteres.

Bzw. für divs mit Inhalt, der nicht im Flow ist. Gib dem div noch position:relative und dem h1 position:absolute.

Aber es ist Mist.

Oder finde eine calc()-fähige Formulierung, um von dem padding-bottom des div die Höhe des h1 abzuziehen (dabei margin-bottom berücksichtigen, und bei einem Block Formatting Context im div auch margin-top).

Erwähnte ich schon, dass die Vorgehensweise Mist ist?

Es ist nur leider alternativloser Mist, bis aspect-ratio kommt.

Rolf

[JürgenB]

Hallo Rolf,

Es ist nur leider alternativloser Mist, bis aspect-ratio kommt.

ich würde, wie schon weiter oben erwähnt, die Höhe mit Javascript setzen, also so etwas wie ele.offsetHeight = ele.offsetWidth. Für Besucher ohne Javascript kann man ja eine Höhe raten und per css setzen.

Gruß
Jürgen

[Rolf B]

Hallo Jürgen,

für eine responsive Seite müsste man das aber in einem resize Handler tun, und das würde ich niemals empfehlen. Damit ruiniert man beim besten Computer die Schwuppdizität.

Vielleicht, wenn's nur wenige Quadrate sind. Und wenn der Resize-Handler ein Throttle-Pattern nutzt.

Rolf

[Gunnar Bittersmann]

@@Rolf B

für eine responsive Seite müsste man das aber in einem resize Handler tun, und das würde ich niemals empfehlen. Damit ruiniert man beim besten Computer die Schwuppdizität.

Die einzigen™, die ihre Browserfenster auf- und zuziehen, sind Webentwickler.^[1]

Und die, die ihre Smartphones/Tablets drehen.

Und wenn der Resize-Handler ein Throttle-Pattern nutzt.

Das allerdings.

😷 LLAP

---

1. ™ – überspitzt formuliert ↩︎

[Matthias Apsel]

Hallo Gunnar Bittersmann,

Die einzigen™, die ihre Browserfenster auf- und zuziehen, sind Webentwickler.

Und wikipedia-Leser:innen.

Bis demnächst
Matthias

[Jörg]

"Aber das geht doch nur solange das Containerelement dazu passt und dann auch nur wenn dir der Inhalt in dem Quadrat keinen Strich durch die Rechnung macht, oder?"

Das stimmt natürlich. Sobald man den Container mit irgendwelchem Inhalt füllt (was man ja gelegentlich tut), kommt in der Tat kein Quadrat mehr dabei heraus.

Es sei denn, man wendet folgenden Trick an:

<div style="background:green; width:20%; padding-top:20%; position:relative;">
<div style="position:absolute; top:0px; left:0px; width:100%; height:100%;">Bla Bla</div>
</div>

Das ist natürlich auch alles andere als sauber... Aber anscheinend gibt es wirklich noch keine besseren Lösungen...

[Rolf B]

Hallo Jörg,

wie ich heute nacht schon sagte...

Immerhin wäre das dann eine Lösung ohne JavaScript.

Rolf

[Matthias Apsel]

Hallo Jörg,

https://vielhuber.de/blog/festes-seitenverhaeltnis-bei-responsiven-html-elementen/

Deinen Cookiehinweis, der mit JS die Links (die wie Buttons aussehen) austauscht, magst du lustig finden, ist er aber nicht. Welche „grundlegenden Tools“ sollten in einer Wordpress-Seite notwendig sein??

Es sei denn, man wendet folgenden Trick an:

<div style="background:green; width:20%; padding-top:20%; position:relative;">
<div style="position:absolute; top:0px; left:0px; width:100%; height:100%;">Bla Bla</div>
</div>

Du solltest vielleicht in deinem Artikel deine Quellen (CSS-Tricks) benennen.

Ganz unten auf dieser Seite gibt es eine Variante mit Pseudoelementen und float. Was die Sache nicht wirklich besser macht.

Bis demnächst
Matthias

[Rolf B]

Hallo Matthias,

Deinen Cookiehinweis, der mit JS die Links (die wie Buttons aussehen) austauscht, magst du lustig finden, ist er aber nicht. Welche „grundlegenden Tools“ sollten in einer Wordpress-Seite notwendig sein??

Ablehnen kann man über einen etwas versteckteren Link - aber der ist unwirksam. Cookies von codepen, nur wenn ich einen Blogeintrag aufrufe, bekomme ich trotzdem.

Und der Buttonswapper ist eh leicht auszutricksen. Kurz antäuschen und dann mit der Maus zurück an die alte Position, und schwupps kommt der gewünschte Button unter die Maus gewandert. Abmahnwürdig könnte das aber trotzdem sein, wenn jemand Böses will.

Rolf

[Matthias Apsel]

Hallo Rolf B,

Ablehnen kann man über einen etwas versteckteren Link

Ja, den habe ich gefunden. Ich frage mich, welche

Tools auf einer einfachen Blogseite so wichtig sein sollen, dass deren Cookies nicht abgewählt werden können.

Und der Buttonswapper ist eh leicht auszutricksen.

Damit ist die Zustimmung keine wirkliche Zustimmung mehr.

Abmahnwürdig könnte das aber trotzdem sein, wenn jemand Böses will.

Dito.

Bis demnächst
Matthias

[Jörg]

Ich habe mit dieser Seite nichts zu tun, habe sie nur zitiert...

[Henry]

Hallo Jörg,

Das ist natürlich auch alles andere als sauber... Aber anscheinend gibt es wirklich noch keine besseren Lösungen...

denke doch und ich hatte meine Freude an dem Rätsel. Glaube aber mittlerweile, dass wenn es funktioniert, die Scripte dazu zu komplex werden. Auf jeden Fall blick ich selbst schon nicht mehr ganz durch, was ich da so alles probiert habe. Am Ende habe ich eine kleine Spielwiese übrig gelassen, die zumindest noch die Ansätze erkennen lässt. Vielleicht lässt sich drauf aufbauen.

Andere, relativ statische Experimente, waren dann noch das.

Gruss
Henry

[Jörg]

Nicht übel! Aber, wie du schon selbst sagst, etwas viel Script. Es wäre schön, wenn man das Problem ohne Javascript lösen könnte.