width und/oder max-width

[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