width und/oder max-width

[Toni]

Hallo,
in der Dok zu responsive design habe ich gelesen, dass Bilder auf die Screengrößen reagieren, wenn folgendes angegeben wird:
img {
   height: auto;
   max-width:  100%;
}
Das ist allerdings nicht der Fall, vielmehr muss ich
width: 100% angeben, damit es so funktioniert. Nun weiß ich aber nicht, ob diese Angabe andere Nebenwirkungen hat.
Was ist die korrekte Angabe?

[ChrisB]

Hi,

in der Dok zu responsive design habe ich gelesen, dass Bilder auf die Screengrößen reagieren, wenn folgendes angegeben wird:
img {
   height: auto;
   max-width:  100%;
}
Das ist allerdings nicht der Fall

Natürlich nicht – ein Bild hat erst mal seine eigene Breite.

vielmehr muss ich width: 100% angeben, damit es so funktioniert.

Natürlich, nur so sagst du dem Bild, „sei nicht so breit, wie du eigentlich bist, sondern mach dich so breit, wie es dein Elternelement erlaubt.”

Nun weiß ich aber nicht, ob diese Angabe andere Nebenwirkungen hat.

Im Normalfall nicht.

Was ist die korrekte Angabe?

Wenn width und max-width gleich sind, dann reicht natürlich auch width alleine.

Was anderes ist es, wenn du das Bild auf volle Breite skalieren willst, sofern diese nicht x überschreitet – dann solltest du zusätzlich zur vollen Breite auch noch x als Maximalbreite angeben, z.B. max-width:1200px. (Das ergibt natürlich nur Sinn, wenn die Maximalbreite *nicht* ebenfalls in Prozent angegeben wird.)

MfG ChrisB

[Gunther]

Hi,

in der Dok zu responsive design habe ich gelesen, dass Bilder auf die Screengrößen reagieren, wenn folgendes angegeben wird:
img {
   height: auto;
   max-width:  100%;
}

  
img {max-width: 100%;}

Diese Angabe verhindert, dass ein Image größer (genauer gesagt breiter) wird, als sein Elternelement.

Das ist eben gerade bei "responsiven" Layouts und (Raster)grafiken sehr hilfreich, da man sich "lediglich" um die Größe (Breite) des Elternelements kümmern muss, nicht aber explizit um die des Images.

Gruß Gunther

[Toni]

Hallo,
sehe ich da nicht einen Widerspruch in Euren Aussagen?
ChrisB sagt nein zu meiner Darstellung, Gunther Ja
Gruß
Toni

[ChrisB]

Hi,

sehe ich da nicht einen Widerspruch in Euren Aussagen?

Wenn du einen siehst, dann irrst du.

ChrisB sagt nein zu meiner Darstellung, Gunther Ja

Ich habe zu nichts nein gesagt, ich habe dir erklärt warum du width:100% brauchst, wenn du ein Bild, das kleiner ist als die verfügbare Breite, über diese strecken willst.

MfG ChrisB