Jörg: Feste Seitenverhältnisse bei responsiven HTML-Elementen

problematische Seite

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!

akzeptierte Antworten

  1. problematische Seite

    @@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

    --
    “When I was 5 years old, my mother always told me that happiness was the key to life. When I went to school, they asked me what I wanted to be when I grew up. I wrote down ‘happy.’ They told me I didn’t understand the assignment, and I told them they didn’t understand life.” —John Lennon
    1. problematische Seite

      Hallo Gunnar,

      Demnächst auch in Ihrem Browser.

      Und wann in Deinem 😜

      Rolf

      --
      sumpsi - posui - obstruxi
  2. problematische Seite

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

    1. problematische Seite

      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

      --
      Meine Meinung zu DSGVO & Co:
      „Principiis obsta. Sero medicina parata, cum mala per longas convaluere moras.“
      1. problematische Seite

        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

        --
        Einfach mal was von der ToDo-Liste auf die Was-Solls-Liste setzen.“
      2. problematische Seite

        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...

        1. problematische Seite

          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

          --
          Meine Meinung zu DSGVO & Co:
          „Principiis obsta. Sero medicina parata, cum mala per longas convaluere moras.“
          1. problematische Seite

            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

            --
            sumpsi - posui - obstruxi
            1. problematische Seite

              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

              1. problematische Seite

                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

                --
                sumpsi - posui - obstruxi
                1. problematische Seite

                  @@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

                  --
                  “When I was 5 years old, my mother always told me that happiness was the key to life. When I went to school, they asked me what I wanted to be when I grew up. I wrote down ‘happy.’ They told me I didn’t understand the assignment, and I told them they didn’t understand life.” —John Lennon

                  1. ™ – überspitzt formuliert ↩︎

                  1. problematische Seite

                    Hallo Gunnar Bittersmann,

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

                    Und wikipedia-Leser:innen.

                    Bis demnächst
                    Matthias

                    --
                    Du kannst das Projekt SELFHTML unterstützen,
                    indem du bei Amazon-Einkäufen Amazon smile (Was ist das?) nutzt.
          2. problematische Seite

            "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...

            1. problematische Seite

              Hallo Jörg,

              wie ich heute nacht schon sagte...

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

              Rolf

              --
              sumpsi - posui - obstruxi
            2. problematische Seite

              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

              --
              Du kannst das Projekt SELFHTML unterstützen,
              indem du bei Amazon-Einkäufen Amazon smile (Was ist das?) nutzt.
              1. problematische Seite

                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

                --
                sumpsi - posui - obstruxi
                1. problematische Seite

                  Hallo Rolf B,

                  Ablehnen kann man über einen etwas versteckteren Link

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

                  Screenshot nicht abwählbare Cookies

                  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

                  --
                  Du kannst das Projekt SELFHTML unterstützen,
                  indem du bei Amazon-Einkäufen Amazon smile (Was ist das?) nutzt.
              2. problematische Seite

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

            3. problematische Seite

              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

              --
              Meine Meinung zu DSGVO & Co:
              „Principiis obsta. Sero medicina parata, cum mala per longas convaluere moras.“
              1. problematische Seite

                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.