Zentrierung - Opera

O

Okicho

Hallo zusammen,

ich schlag mich seit mehreren Stunden mit einem (eigentlich) kleinen Problem rum.

Die Seite (Bildergalerie), an der ich dran bin, soll eine Fullscreen-Seite werden. Also sie skaliert immer auf volle breite und volle Höhe.
Unterteilt ist sie in 3 Bereichen:
- Header
- Content
- Footer

Der Content-DIV beinhaltet ein Bild, welches zentriert mitskaliert werden soll, dabei aber nicht das Seitenverhältnis verlieren darf. Das klappt auch alles wunderbar, außer in Opera. Ich habe mal ein bisschen im Internet rumgestöbert und rausgefunden, dass ein Bild, welches position:absolute hat, sich erst zentriert, wenn Opera die feste Breite von dem Bild weiß. Problem ist nur, dass das Bild immer ausgetauscht werden soll (also unterschiedliche Größen) und durch das skalieren keine feste Größe geben darf.

Beispielbild was man verwenden könnte, um den Dummy etwas besser nachzuvollziehen:
http://www.wallpaper-gratis.eu/blume/natur/blume001_1400x1050.jpg
(Bilder sind halt größer als der letztendliche Anzeigenbereich und werden dementsprechend runterskaliert.)


Danke schonmal für jede Hilfe!
Viele Grüße




<body>

<div id="header"></div>

<div id="content">
<img src="http://www.wallpaper-gratis.eu/blume/natur/blume001_1400x1050.jpg" />
</div>

<div id="footer"></div>

</body>





*{
margin:0;
padding:0;
}
img {
border:none;
}
html,body {
margin: 0;
padding: 0;
}
html,body {
height: 100%;
}



#header {
width:100%;
min-height:6%; /* For Modern Browsers */
height:auto !important; /* For Modern Browsers */
height:6%; /* For IE */
background-color:#0033CC;
}
#content {
width:94.2%;
height:72%;
background-color:#00FF00;
margin-left:auto;
margin-right:auto;
position:relative;
text-align:center;
background-color:#00FF00;
}
#content img {
border:1px solid #999999;
max-width:100%;
max-height:100%;
position: absolute;
margin-left: auto;
margin-right: auto;
left: 0;
right: 0;
}
#footer {
width:100%;
min-height:21%; /* For Modern Browsers */
height:auto !important; /* For Modern Browsers */
height:21%; /* For IE */
background-color:#993300;
}
 
Hi,

ergänze diesen Regelblock folgendermaßen:

Code: 
#content img {
border:1px solid #999999;
width:100%;
max-width:100%;
height:100%;
max-height:100%;
position: absolute;
/*margin-left: auto;*/ /* wird nicht benötigt */
/*margin-right: auto;*/ /* wird nicht benötigt */
left: 0;
right: 0;
}


mfg Maik
 
Hi Maik,

danke erstmal für Deine Antwort.

Habe Deine Formatierung versucht, aber leider ist es auch nicht die Lösung, da das Bild verzerrt wird.
Das Seitenverhältnis des Originalbild darf nicht verändert werden. Das ist die Herausfoderung ... :)

grüße
 
Es liegt in der Natur der Sache, dass das Bild nun evtl. verzerrt dargestellt wird, denn das umschliessende DIV gibt hier mit seinen Dimensionen (94.2%x72%), die sicherlich nicht dem Seitenverhältnis des Bildes entsprechen, die Bildgröße vor.

mfg Maik
 
es geht mir ja eigentlich nur um das mittige ausrichten des Bildes in dem Browser Opera.
In Firefox (zum Beispiel) funktioniert alles super.
Bild ist mittig, skaliert mit und wird nicht verzerrt.
 
Durch deine Positionsangaben left:0 und right:0 bin ich davon ausgegangen, dass sich das Bild vom linken bis zum rechten Rand des DIVs #content erstrecken soll.

Dann nutze diese Regel, um das Bild im DIV horizontal zu zentrieren:
CSS: 
#content img {
border:1px solid #999999;
max-width:100%;
max-height:100%;
margin:auto;
}

Der aktuelle Opera 10.10 interpretiert dieses CSS, wie von dir gewünscht, tadellos.

mfg Maik
 
Um antworten zu können musst du eingeloggt sein.

Neue Beiträge

Zurück