img darf nicht aus div herauslaufen

[mschlegel]

Hi

Gibt es eine CSS-Eigenschaft für DIVs die es Bildern verbietet größer zu sein als dieser DIV (inkl des Paddings).

Hintergrund ist eine WCMS für welches ich ein Template habe, aber die Bildergallery benutzern will die bereits vorhanden ist. Mein Problem ist jetzt die Bilder in der Detailansicht in der Breite aus dem Inhaltens-Container herauslaufen.

Danke

 

[Maik]

Hi,

hierfür gibt es sogar zwei: "standardmäßig" overflow:hidden, oder die clip-Eigenschaft, um einen Ausschnitt in der Grafik zu definieren.

mfg Maik

 

[mschlegel]

Danke

overflow:hidden nutze ich schon, aber das Bild schiest trotzdem über den rechten Rand hinaus. Könnte aber daran liegen, dass die verwendete Komponente wieder einen eigenen DIV benutzt (sollte das overflow nicht auch für alle Kindelemente gelten?).
Clippen möchte ich ja eigentlich nichts.

 

[Maik]

Hi.

sollte das overflow nicht auch für alle Kindelemente gelten?

Nein, die overflow-Eigenschaft wird nicht an die Nachfahrenelemente vererbt.

Da du das Markup und die Formatierung der "Komponente" hier nicht näher vorstellst, kann ich nur spekulieren, weshalb das Bild trotz overflow:hidden-Deklaration für das DIV über seinen rechten Elementrand hinausläuft, und tippe auf eine fehlende Breitendeklaration für das DIV, denn ohne diese kann hier overflow:hidden logischerweise auch nicht greifen.

Ansonsten wäre mir aus der CSS-Praxis kein weiterer Grund bekannt, der besagte Eigenschaft "aushebelt".

In diesem Zusammenhang zitiere ich an dieser Stelle mal SELFHTML zum Abschnitt overflow, da es genau deinen Anwendungsfall umschreibt:

Diese Angabe kann von Bedeutung sein, wenn Sie für ein Element oder einen Bereich eine feste oder maximale gewünschte Breite oder Höhe definieren. Angenommen, Sie definieren einen Bereich mit <div>...</div>, für den Sie mit Hilfe der Eigenschaft width eine Breite von effektiv 202 Pixel (da der Rahmen addiert wird) erzwingen. Wenn Sie innerhalb dieses Bereichs eine Grafikreferenz (<img>) notieren, bei der das Bild eine Breite von mehr als 200 Pixel aufweist, können Sie mit der hier beschriebenen Angabe regulieren, wie der Browser diesen Konflikt lösen soll.

• Quelle: http://de.selfhtml.org/css/eigenschaften/positionierung.htm#overflow

und empfehle dir desweiteren das entsprechende Kapitel Überlauf und Abschneiden der CSS2-Spezifikation, das die von mir eingangs genannten Eigenschaften behandelt.

mfg Maik