margin-top:auto....

[HabEinProblem]

Hi

ich will ganz normal einen DIV-Container (Eyectacher mit 300pixel Höhe) anlegen und in diesen ein Bild laden. Das Bild soll mit "width:100%" auf die Bildschirmbreite optimiert werden.

Im Gegenzug soll die Höhe des Bildes auch analog skaliert werden. Zusätzlich soll das Bild aber vertrikal mittig positioniert werden.  Grund: Ist der Bildschirm breiter ust das Seitenverhältnis vom Eyecatcher ggf. 7:1 , bei schmäleren Bildschirm ggf. nur 3:1 .d.h. ich benötige vertikal mehr Ausschnitt vom OrginalBild:

  
#logocontainer{  
	z-index:		2;  
	height:			325px;  
	overflow:		hidden;  
	position:		relative;  
}  
#logocontainer img{  
	display:		block;  
	margin:			auto 0px;  
	text-align:		center;  
	width:100%;  
	overflow:hidden;  
}  

Das ganze führt aber beim ersten laden zu einer verzerrten Darstellung, d.h. das Bild ist vertikal auf 325 px gestaucht und beim zweiten Laden dazu dass das Bild von oben genommen wird. Wie erreiche ich es per CSS, dass der Bildausschnitt aus der Mitte kommt: Das margin: auto 0px sollte das doch machen?

Gruß

und dann

  
<div id="logocontainer"><img id="logo" src="./images/lighthouse_eyecatcher.jpg" border="0"  
alt="Navigieren Sie zu: Wir wollen mit Ihnen in Kontakt bleiben"  title="Navigieren Sie zu: Wir wollen mit Ihnen in Kontakt bleiben"  />  
</div>