Demo „Design03“ enthält nicht skaliertes Bild

[HJMeyer]

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?

[Auge]

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

[Gunnar Bittersmann]

@@Auge

.spalte img {
    width: 100%;
}

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

LLAP 🖖

[Auge]

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

[Gunnar Bittersmann]

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