Zusammenhang width und max-width

[heinetz]

Hallo Forum,

ich baue gerade an der mobilen Version einer Website und dachte, ich wäre mit meinem CSS soweit durch, da teste ich mal auf Windows Mobile und es, wie sollte es anders sein, passt nicht ;(

Was Probleme bereitet sind meine Grafiken, denen ich realtive Grössen verpasst hatte. Soweit sogut, dass max-width auf dem IE 6 nicht geht aber man das mit JavaScript-Expressions lösen könnte, habe ich schnell herausgefunden. Allerdings fiel ich bei der Gelegenheit darüber, dass mir der Zusammenhang zwischen width und max-width nicht klar ist, denn ich beobachte z.B. ein Phänomen (nicht im IE sondern bei Opera):

#img {
margin: 0;
max-width: 100%;
}

... und das Bild wird auf die Grösse des Containers skalliert, aber nicht über seine eigenen Pixelmasse hinaus. Es ist maximal 100% (seiner selbst) breit. Woher das Bild weiss, dass es den Container zu 100% ausfüllen soll, ist mir hier schon nicht klar. Klar erscheint mir dagegen das Folgende:

#img {
margin: 0;
width: 100%;
}

... aber ganz konfus empfinde ich das max-width im Folgenden keinen Effekt mehr hat:

#img {
margin: 0;
width: 100%;
max-width: 100%;
}

kann mir das jemand erklären?

gruss,
heinetz

[LX]

Holla, heinetz!

Opera Mini rendert die Seiten serverseitig und hat dabei gleich mehrere Probleme; Dieses war mir allerdings neu - was jedoch daran liegen wird, dass die Doppelung der Angaben zwecklos ist.

Gruß, LX

[heinetz]

Hello,

was jedoch daran liegen wird, dass die Doppelung der Angaben zwecklos ist.

Wenn ich ausdrücken will, dass eine Grafik die Grösse des sie enthaltenen Containers einnehmen soll, aber nur solange der Container kleiner ist als die Grafik selbst, hört sich 'width:100%; max-width:100%' für mich erstmal sinnvoll an bis auf die Tatsache, dass sich 'width' auf das Verhältnis der Grafik zum Container bezieht, 'max-width' aber auf die Abmessungen der Grafik selbst. Und genau das finde ich unklar.

beste gruesse,
heinetz

[LX]

Hey, heinetz!

"width" bezieht sich genau wie "max-width" auf die Größe des nächsten relativ positionierten Containers. "max-width" deckelt "width" normalerweise bei einer bestimmten Breite (im Sinne von "width: 90%; max-width: 1400px;" oder "width: auto, max-width: 100%;"), hat jedoch ansonsten keine unterschiedliche Funktion. Insofern ergibt "width: 100%; max-width: 100%;" keinen Sinn.

Hinzu kommt jedoch: In einigen mobilen Browsern (bspw. Blackberry Bold, Opera Mini) wird jedoch nicht der nächste relativ positionierte Container als Bezug genommen, sondern immer die maximale Seitengröße.

Gruß, LX