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>  

[HabEinProblem]

Nachtrag:

ergänze ich in den CSS

  
#logocontainer img{...  
position:absolute;  
}  

Wird es bei FF und IE i.d.R. mittig zentriert, bei Chrome aber beim Laden der Seite auch mittag, aber beim Button "Releoad" die gleiche Seite das gleiche Logo vertikal verzerrt.

Wie kann ich "sicherstellen", dass alle Browser das Bild in Orginal-Skalierung ausgeben?
Bin gespannt auf Vorschläge.

Gruß

[Der-Dennis]

Hallo HabEinProblem,

kannst Du was mit background-size anfangen?

Gruß, Dennis

[HabEinProblem]

Hi

Danke für den Support soweit.

Da es sich ja nicht um ein Background Image handelt, sondern um ein "ordinäres" <img... im HTML-Text ist alles mit background- m.E. keine Lösung.

Grund: Die Bilder sollen vom User auswählbar sein und daraus dann Hintergrundbilder in CSS zu machen ist komplexer. Wenn ich es so läsen könnte wäre es toll.

Testseite:
http://www.demob2bshop.e-consultancy.de/index_test.php
nutzt wenige CSS Styles aus der Datei
http://www.demob2bshop.e-consultancy.de/assets/style_test.css

Zugang:
User: SelfHtml
Pass: GeheimZugang

Bitte mit Chrome ansehen:

1. die URL eingeben und dann Enter drücken => ok
2. Danach den Reload Button (runder Pfeil) drücken => verzerrt
3. danach in die URL tippen und Return drücken => ok
4. danach den Reload Button drücken => verzerrt

Bei allen anderen Browser (IE, FF, Opera)

1. die URL eingeben und dann Enter drücken => machmal ok, manchmal nicht
2. Danach den Reload Button (runder Pfeil) drücken => ok
3. danach in die URL tippen und Return drücken => ok
4. danach den Reload Button drücken => ok

Bin gespannt von Euch zu hören

Gruß
Norbert

[HabEinProblem]

Nachtrag
beim IE kommt das Bild nur mit 227 pixel Höhe raus, also mehr beschnitten als bei den anderen Browsern...

Norbert

[HabEinProblem]

Ah danke, sehe gerade dass dort eine Routine doch das Bild anfäßt: Muss ich analysieren.
Schon mal geholfen eine SPur zu finden. Danke

Manchmal hat man Tomaten auf den Augen. Ich dachte mein JS wird gar nicht angesprochen, es ist eines das im Design verankert war, das hatte ich übersehen...

Norbert

[Matthias Apsel]

Om nah hoo pez nyeetz, HabEinProblem!

http://www.demob2bshop.e-consultancy.de/index_test.php

Du arbeitest mit JavaScript.

Matthias

[Matthias Apsel]

Om nah hoo pez nyeetz, HabEinProblem!

Wird es bei FF und IE i.d.R. mittig zentriert, bei Chrome aber beim Laden der Seite auch mittag, aber beim Button "Releoad" die gleiche Seite das gleiche Logo vertikal verzerrt.

Warum sollte beim ersten Laden etwas anders sein, als beim zweiten?
Die Positionierung ist sicher nicht notwendig.
Es sollte text-align: center für das umgebende Element reichen. Eventuell tut es auch ein Hintergrundbild.

Magst du die Seite zeigen?

Matthias