max-width und max-height

[misterunknown]

Moin,
ich habe einen Div, der per CSS die Eigenschaften max-width:150px; und max-height:150px; bekommt.
Innerhalb des Divs werden Bilder angezeigt. Die img-Elemente bekommen die Eigenschaften max-width:100%; und max-height:100%;.

Sind nun die Bilder im Querformat, also width>height, dann wird alles korrekt angezeigt. Im Hochformat allerdings ragen die Bilder unter dem Div heraus, was nicht passieren soll. Woran liegt das? Wie könnte ich es vielleicht auch anders lösen, dass die größte Dimension des Bildes maximal 150px ist?

Fürs Verständnis: Link

Grüße Marco

[Matthias Apsel]

Om nah hoo pez nyeetz, misterunknown!

Woran liegt das?

Der Browser ist bestrebt, das Seitenverhältnis der Bilder beizubehalten.

Matthias

[misterunknown]

Moin,

Der Browser ist bestrebt, das Seitenverhältnis der Bilder beizubehalten.

Das soll er auch. Wenn die Höhe also größer als 150px ist, muss er die Breite so angepassen, dass es im Verhältnis steht.

Grüße Marco

[ChrisB]

Hi,

Wie könnte ich es vielleicht auch anders lösen, dass die größte Dimension des Bildes maximal 150px ist?

Indem du genau diesen Wert für max-width und -height angibst …?

MfG ChrisB

[misterunknown]

Moin,

Indem du genau diesen Wert für max-width und -height angibst …?

Wenn aber meine Auftraggeberin sagt, dass die Thumbnails 176px groß sein sollen...

Stimmt. Dann gebe ich das einfach so ein. Ich versteh grade sowieso nicht, warum ich Divs ringsherum hab. Das Leben könnte so einfach sein, wenn man sich es nicht unnötig schwer machen würde -.-

Grüße Marco

[misterunknown]

Moin,
ich habs geschafft indem ich dem Div feste Dimensionsangaben gegeben habe. Jetzt muss ich die Bilder nur noch horizontal zentrieren...

Grüße Marco

[Matthias Apsel]

Om nah hoo pez nyeetz, misterunknown!

Moin,
ich habs geschafft indem ich dem Div feste Dimensionsangaben gegeben habe. Jetzt muss ich die Bilder nur noch horizontal zentrieren...

verwende eine Liste! Du brauchst nicht jedem Element die Klasse 'foto' geben, verwende stattdessen einen passenden Selektor.

z.B.

<ul class='fotoliste'>  
  <li><img></li>  
   ...  
</ul>

und

.fotoliste img { ... }

Matthias

[misterunknown]

Moin,

verwende eine Liste! Du brauchst nicht jedem Element die Klasse 'foto' geben, verwende stattdessen einen passenden Selektor.

Guter Gedanke. Habs jetzt so gemacht.

Ich habe allerdings noch ein kleines Problem: Die obere Zeile ist eingerückt. Wie kann ich das verhintern?

Grüße Marco

[ChrisB]

Hi,

Ich habe allerdings noch ein kleines Problem: Die obere Zeile ist eingerückt. Wie kann ich das verhintern?

Indem du die Defaultformatierung für UL/LI, die diese Einrückung bewirkt, überschreibst.
Wenn du dir nicht sicher bist, welche Eigenschaft(en) das sein könnte(n) – dann schau’s dir mit Firebug o.ä. an.

MfG ChrisB

[misterunknown]

Moin,

Indem du die Defaultformatierung für UL/LI, die diese Einrückung bewirkt, überschreibst.
Wenn du dir nicht sicher bist, welche Eigenschaft(en) das sein könnte(n) – dann schau’s dir mit Firebug o.ä. an.

Ja, habs rausgefunden. Jetzt muss ich nur noch die Querformatbilder halbwegs vertikal zentrieren. Und das ist Sackgang. Wirklich geht das nur mit einer Tabelle, oder ich lass irgendwo größenangaben weg, was mir aber meine Logik wieder zerstört -.-
Ich habe jetzt ein   davor gesetzt, damit das eine Querformatbild wenigstens nicht ganz so am oberen Rand klatscht. Ich hab gelesen, dass vertical-align nur bei td funktioniert. Sehr unschön.

Grüße Marco

[ChrisB]

Hi,

Jetzt muss ich nur noch die Querformatbilder halbwegs vertikal zentrieren. Und das ist Sackgang.

Hast du so kurze Beine, oder …?

Wirklich geht das nur mit einer Tabelle, oder ich lass irgendwo größenangaben weg, was mir aber meine Logik wieder zerstört -.-

Oder du benutzt die hier schon zigfach für sowas empfohlene Möglichkeit, es über line-height zu machen.

MfG ChrisB

[Matthias Apsel]

Om nah hoo pez nyeetz, misterunknown!

Ich habe allerdings noch ein kleines Problem: Die obere Zeile ist eingerückt. Wie kann ich das verhintern?

Beachte die Klammern in Chris' Antwort.

Matthias

[Gunnar Bittersmann]

@@misterunknown:

nuqneH

Sind nun die Bilder im Querformat, also width>height, dann wird alles korrekt angezeigt. Im Hochformat allerdings ragen die Bilder unter dem Div heraus, was nicht passieren soll. Woran liegt das?

Daran: “If the height of the containing block is not specified explicitly (i.e., it depends on content height), and this element is not absolutely positioned, the percentage value is treated as '0' (for 'min-height') or 'none' (for 'max-height').” [CSS21 §10.7]

Qapla'