nicht angemeldet
Riesen Bild auf Browsergröße beschneiden
Hallöchen erstmal,
ich habe da eine Seite die einen schwebenden Inhaltsbereich hat.
Also der bereich hat eine fixe Höhe und Breite, ist jedoch immer vertikal und horizontal zentriert. Auf dem linken Rand habe ich ein Bild das immer die selbe Position vom Inhalt aus gesehen haben soll, aber auch gleichzeitig nur den Browser ausfüllen soll und nicht zum Scrolen führen darf... Frage: Wie mache ich das?
Mein erster Anlauf war die Höhe mit Javascript zu berechnen, jedoch scheiterte das ganze am IE 7. Ja, sehrwohl auf Safari, IE 6, FF und Opera gehts! Ich zeig euch mal, was ich bis jetzt habe:
<script language="javascript" type="text/javascript">
<!--
function init() {
bildberechnung();
}
function fensterhoehe() {
if (window.innerHeight) return window.innerHeight;
else if (document.body && document.body.offsetHeight) return document.body.offsetHeight;
else return 0;
}
function bildberechnung()
{
var hoehe;
var margintop;
hoehe = fensterhoehe();
margintop = ((hoehe-600)/2);
test = 200-margintop;
document.getElementById("grossesbild").style.height = hoehe + test + "px";
}
-->
</script>
<style type="text/css">
<!--
body {
margin: 0;
width: 100%;
height: 100%;
overflow: hidden;
background-color:#CCCCCC;
}
img {
behavior: url("pngbehavior.htc");
}
#borderframe {
position: absolute;
text-align: center;
width: 100%;
height: 1px;
left: 0px;
top: 50%;
overflow: visible;
visibility: visible;
display: block
}
#mainframe1 {
position: absolute;
margin-left: -385px;
top: -300px;
left: 50%;
padding: 0px;
}
#mainframe2 {
margin: 0px;
padding: 0px;
position: absolute;
width: 770px;
height: 600px;
overflow: hidden;
background-color: white;
}
#grossesbild {
position: absolute;
z-index: 5;
margin-left: -100px;
margin-top: -200px;
height: 150px;
width: 225px;
overflow: hidden;
}
</style>
</head>
<body onload="init();">
<div id="borderframe">
<div id="mainframe1">
<div id="grossesbild"><div style="vertical-align:middle;"><img src="img/grossesbild.png" width="225" height="1200" /></div></div>
<div id="mainframe2"></div>
</div>
</div>
Wäre echt spitze, wenn mir da jemand helfen könnte!
MfG Kasimir
-
habs gelöst, hab dem style tag body noch html angefügt
sieht nun so aus:html, body {
margin: 0;
width: 100%;
height: 100%;
overflow: hidden;
background-color:#C3E1FF;
}funktioniert jetzt in jedem browser ordentlich.
mfg kasi-
Hi,
ich versteh grad nicht, was dagegen spricht dein Bild einfach als Hintergrundbild zu benutzen. Ich seh da ein mords Div das in keines meiner Browserfenster passt (ok, mit Ubuntu wuerds zwar in das Browserfenster passen, aber nicht auf den Bildschirm...). Nur Warum? Welchen Zweck verfolgst Du mit all dem?
-