Autor |
Nachricht |
gerch2003
Threadersteller
Dabei seit: 07.07.2008
Ort: -
Alter: 63
Geschlecht:
|
Verfasst Do 19.03.2009 15:22
Titel Bild an Seitengröße anpassen |
|
|
Hallo Leute,
ich hab mir folgendes überlegt.
Um ein Bild browserfüllend auf ner Seite anzuzeigen könnte man das ja folgendermaßen lösen:
Code: | <img style="position: absolute; width: 100%; height: 100%; left: 0px; top: 0px ;z-index: -1;" border="0" src="club.jpg"> |
Das Problem an dieser Lösung ist ja, dass wenn ich das Bild an einen Widescreen anpassen, es ja aber immernoch einige User mit eher Quadratischen Monitoren gibt, bei denen dann das Bild verzerrt ist.
Also habe ich mir überlegt,
ma schreibe es so in der Art:
Code: | <div style="position:absolute; width:100%; height:100%; left:50%; margin-left:-50%; top:0px;" border="0">
<img align="center" border="0" src="club.jpg">
</div> |
So funktioniert es nur leider nicht.
Der Grundgedanke bei der Geschichte ist der,
die Div auf der Seite zu zentriern, bzw. Sie auf Browsergröße anzupassen und dann das Bild in der Ebene zu zentrieren.
Dass also das Bild innerhalb der Ebene auf Browsermitte zentriert ist und somit der linke, bzw. der rechte Rand des Bildes abgeschnitten wird.
Ich hoffe mal ich hab das richtig erklärt.
Hat jemand ne Ahnung, wie man das Lösen könnte und ob das überhaupt funktioniert???
Gruß Gerch
|
|
|
|
|
danielkussin
Dabei seit: 04.06.2008
Ort: Hamburg
Alter: 42
Geschlecht:
|
Verfasst Do 19.03.2009 15:46
Titel Re: Bild an Seitengröße anpassen |
|
|
gerch2003 hat geschrieben: | die Div auf der Seite zu zentriern, bzw. Sie auf Browsergröße anzupassen und dann das Bild in der Ebene zu zentrieren.
Dass also das Bild innerhalb der Ebene auf Browsermitte zentriert ist und somit der linke, bzw. der rechte Rand des Bildes abgeschnitten wird. |
Hi,
ich hab nicht verstanden was du genau möchtest! Wieso soll der Rand eines Bildes abgeschnitten werden?
Soll das Bild im Hintergrund sein?
Gruß Daniel
Zuletzt bearbeitet von danielkussin am Do 19.03.2009 15:47, insgesamt 1-mal bearbeitet
|
|
|
|
|
Anzeige
|
|
|
gerch2003
Threadersteller
Dabei seit: 07.07.2008
Ort: -
Alter: 63
Geschlecht:
|
Verfasst Do 19.03.2009 16:02
Titel Re: Bild an Seitengröße anpassen |
|
|
danielkussin hat geschrieben: | gerch2003 hat geschrieben: | die Div auf der Seite zu zentriern, bzw. Sie auf Browsergröße anzupassen und dann das Bild in der Ebene zu zentrieren.
Dass also das Bild innerhalb der Ebene auf Browsermitte zentriert ist und somit der linke, bzw. der rechte Rand des Bildes abgeschnitten wird. |
Hi,
ich hab nicht verstanden was du genau möchtest! Wieso soll der Rand eines Bildes abgeschnitten werden?
Soll das Bild im Hintergrund sein?
Gruß Daniel |
Es gibt nur dieses eine Bild auf der Seite, also sonst keinen Inhalt und ich hätte das Bild eben gerne Seitenfüllend.
|
|
|
|
|
danielkussin
Dabei seit: 04.06.2008
Ort: Hamburg
Alter: 42
Geschlecht:
|
Verfasst Do 19.03.2009 16:55
Titel
|
|
|
Folgendes sollte i.d.R. funktionieren, allerdings wird der Internet Explorer sicher wieder spinnen, also brachst du dafür noch einen Hack (Google mal: "IE CSS Disable Scrolling").
Code: | <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<style type="text/css">
body {
overflow:hidden;
}
img {
display:block;
position:relative;
width:100%;
}
</style>
</head>
<body>
<img src="image.jpg" alt="" />
</body>
</html> |
Gruß Daniel
|
|
|
|
|
gerch2003
Threadersteller
Dabei seit: 07.07.2008
Ort: -
Alter: 63
Geschlecht:
|
Verfasst Do 19.03.2009 22:17
Titel
|
|
|
danielkussin hat geschrieben: | Folgendes sollte i.d.R. funktionieren, allerdings wird der Internet Explorer sicher wieder spinnen, also brachst du dafür noch einen Hack (Google mal: "IE CSS Disable Scrolling").
Code: | <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<style type="text/css">
body {
overflow:hidden;
}
img {
display:block;
position:relative;
width:100%;
}
</style>
</head>
<body>
<img src="image.jpg" alt="" />
</body>
</html> |
Gruß Daniel |
Hey Daniel,
danke dir, funktioniert super!!!!
Das Scrollen hab ich jetzt garnicht gefixt, da es eigentlich ganz gut ist, dass es das Bild im IE nicht abschneidet.
Aber erklär mir doch mal bitte warum das so funktioniert, wie es funktioniert
Des kann ich nämlich aus deinem Code nicht so wirklich rauslesen
Gruß Gerch
|
|
|
|
|
pixelpapst303
Dabei seit: 06.07.2006
Ort: hamburg
Alter: 50
Geschlecht:
|
Verfasst Fr 20.03.2009 07:33
Titel
|
|
|
gerch2003 hat geschrieben: |
Aber erklär mir doch mal bitte warum das so funktioniert, wie es funktioniert |
im gegensatz zu deiner lösung wird hier nur width auf 100% gesetzt, somit errechnet sich die
height in der richtigen proportion und es wird nichts verzerrt. allerdings ist dann natürlich je
nach relation immer ein stück "abgeschnitten" oder ausm bildschirm raus...
|
|
|
|
|
danielkussin
Dabei seit: 04.06.2008
Ort: Hamburg
Alter: 42
Geschlecht:
|
Verfasst Fr 20.03.2009 09:00
Titel
|
|
|
pixelpapst303 hat geschrieben: |
im gegensatz zu deiner lösung wird hier nur width auf 100% gesetzt, somit errechnet sich die
height in der richtigen proportion und es wird nichts verzerrt. allerdings ist dann natürlich je
nach relation immer ein stück "abgeschnitten" oder ausm bildschirm raus... |
Richtig! Und weil unter Umständen das Bild höher ist als der Viewpoint (Teil des Browserfensters, in dem die Website angezeigt wird), ist die Anweisung für den
Code: | body {
overflow:hidden;
} |
wichtig, denn der weist den Browser an, beim Überschreiten des Viewpoints, egal in welche Richtung, diesen Teil nicht anzuzeigen, und somit wird das Browserfenster auch nicht scrollbar. Wie gesagt eigentlich, denn der IE befolgt das leider nicht, wenn die hasLayout-Funktion ausgelöst wird. Aber wie schon geschriben, gibt es dafür sicher schon ein Word-Around.
Gruß Daniel
|
|
|
|
|
gerch2003
Threadersteller
Dabei seit: 07.07.2008
Ort: -
Alter: 63
Geschlecht:
|
Verfasst Fr 20.03.2009 15:22
Titel
|
|
|
Gerch, Verstanden.
Ende
Und danke euch
|
|
|
|
|
|
|
|
Ähnliche Themen |
PDF-Seitengröße anpassen ...
bild an fenster anpassen
Das Fenster genau an das Bild anpassen
CSS Hintergrund Bild grösse anpassen
Bild (Foto) zentriert an Browsergröße anpassen?
[Flash] Bild an Fenstergrösse im Vollbild-Projektor anpassen
|
|