HJMeyer: Demo „Design03“ enthält nicht skaliertes Bild

problematische Seite

Die Demo zu Design03 enthält ein Bild, das nicht skaliert wird. Das sieht auf einem Handy nicht wirklich "responsive" aus. Ist das so gewollt, oder soll das als abschreckendes Beispiel dienen?

  1. problematische Seite

    Hallo

    Die Demo zu Design03 enthält ein Bild, das nicht skaliert wird.

    Das gilt für eine Viewportbreite < 30em. Bei breiteren Viewports skaliert das Bild. Eine Angabe für .spalte img fehlt außerhalb der per Media Query definierten Blöcke für breitere Viewports. Das ist behebbar mit der folgenden Angabe, notiert vor Zeile 230 der style.css.

    .spalte img {
        width: 100%;
    }
    

    Tschö, Auge

    --
    Ein echtes Alchimistenlabor musste voll mit Glasgefäßen sein, die so aussahen, als wären sie beim öffentlichen Schluckaufwettbewerb der Glasbläsergilde entstanden.
    Hohle Köpfe von Terry Pratchett
    1. problematische Seite

      @@Auge

      .spalte img {
          width: 100%;
      }
      

      Vermutlich ist man besser dran, wenn man außerhalb jeglicher media queries img { max-width: 100% } setzt.

      LLAP 🖖

      --
      „Wer durch Wissen und Erfahrung der Klügere ist, der sollte nicht nachgeben. Und nicht aufgeben.“ —Kurt Weidemann
      1. problematische Seite

        Hallo

        .spalte img {
            width: 100%;
        }
        

        Vermutlich ist man besser dran, wenn man außerhalb jeglicher media queries img { max-width: 100% } setzt.

        Vor der von mir als Grenze genannten Zeile 230 ist „außerhalb jeglicher media queries“. Bleibt die Frage, ob sich max-width mit der in den Media Queries benutzen width (mit 50% und später/breiter 33% von .spalte) beißen könnte. Nicht, dass sich das Bild, weil es geht, die ganze Breite von .spalte nimmt.

        Wobei das, zumindest in der Beispielseite, auch recht ansehnlich aussieht.

        Tschö, Auge

        --
        Ein echtes Alchimistenlabor musste voll mit Glasgefäßen sein, die so aussahen, als wären sie beim öffentlichen Schluckaufwettbewerb der Glasbläsergilde entstanden.
        Hohle Köpfe von Terry Pratchett
        1. problematische Seite

          @@Auge

          Bleibt die Frage, ob sich max-width mit der in den Media Queries benutzen width (mit 50% und später/breiter 33% von .spalte) beißen könnte.

          Nö. width überschreibt max-width ja nicht, sondern beides sind verschiedene CSS-Eigenschaften.

          Nicht, dass sich das Bild, weil es geht, die ganze Breite von .spalte nimmt.

          max-width heißt nicht: mach dich so breit wie’s geht.

          LLAP 🖖

          --
          „Wer durch Wissen und Erfahrung der Klügere ist, der sollte nicht nachgeben. Und nicht aufgeben.“ —Kurt Weidemann