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;
}
