CSS-Problem (Bild ragt rechts aus div)

[Mordor]

Hallo Zusammen,
ist zwar eigentlich nicht da Thema hier, ich frag aber trotzdemmal:
Ich habe eine div-Box die sich dynamisch an die Browsergröße anpasst In dieser Box befindet sich ein Bild, welches zentriert ist. Wenn die div-Box nun zu klein wird, ragt das bild irgendwann rechts oder unten aus der box. Kennt irgendjemand ne Möglichkeit, dass Bild mit der div-Box dynamsich zu verkleiner? Ich finde da grad nix. Vielleicht hab ich aber auch nur Tomaten auf den Augen heute.

Gruß Mordor

 

[efendi]

Guten Abend,
spontan würde ich vorschlagen, die Größenangabe für das Bild in Prozent zu definieren. Weitere Möglichkeit wäre der Einsatz von min-width und max-width. Vielleicht kannst Du mal die betreffende CSS-Definition posten, dann wissen wir mehr.

Gruß

 

[Mordor]

also, der betreffende HTMl-Code sieht so aus:

<div id="headerbox">
		<div id="photo">
			<div class="wraptocenter"><span></span>
				<img title="API 225L Discrete Compressor 200er Series Module" src="/images/mediasurfershop/api/ph1_225l_l.jpg">
			</div>
		</div>
	</div>

Der dazugehörige CSS Code sieht dann so aus:

.wraptocenter img{
	max-height: 400px;
	max-width: 1200px;
	margin: 10px; 
}

Das Problem ist, dass die maximale Breite, die der div haben kann 1200 Pixel sind. So darf also das Bild auch maximal so breit sein. Fährt man das ganze aber zusammen, schießt das Bild rechts aus dem Div.

 

[efendi]

Ich weiß nicht, ob ich's richtig verstanden habe, aber versuch's mal mit einem overflow:hidden. Also:

#photo {
    overflow: hidden;
}

In meinem Quick & Dirty-Versuch hat es geklappt.

Gruß

ps
Bei Deinen Angaben wird das Bild aber niemals eine Breite von 1200px erreichen, "max-height: 400px;" verhindert das.

 

[Mordor]

Das sind keine normalen Bilder, sondern 19Zoll einbaugeräte. Da geht das schon, dass das 1000 breit ist, und nur 400 hoch.

Wenn ich overflow auf hidden stelle, versteckt er mir doch das, was er nicht mehr in die Box packt?!

 

[efendi]

Wenn ich overflow auf hidden stelle, versteckt er mir doch das, was er nicht mehr in die Box packt?!

Ja, Teile des Bildes werden versteckt.
Vielleicht versuchst Du es mit relativen Größenangaben, bsp.: max-width: 100%;, oder so.