• Jetzt anmelden. Es dauert nur 2 Minuten und ist kostenlos!

Übergroßes Bild zentrieren?

Haruhi

Neues Mitglied
Hallo Leute, bin gerade echt überfragt.

Ich habe ein Bild das 2600 Pixel breit ist.
Dieses wird auf meiner Seite immer Links am Bildschirmrand angeordnet.
Ich möchte aber, dass es generell zentriert ist, dass man also den mittleren Teil des Bildes sieht, egal wie breit man das Browserfenster zieht.
Ist das irgendwie möglich mit einem normalen Image-Tag?

Hoffe ihr könnt mir helfen ;O;
 
Werbung:
Ich würde es als background-image einbinden und mit
Code:
background-position:50% 50%;
zentrieren
 
Werbung:
Mit Nachteilen behaftet; aber weise mal dies dem img zu (height und margin-top ggf. anpassen):

Code:
position: absolute;
left: 50%;
top: 50%;
width: 2600px;
height: 2600px;
margin-left: -1300px;
margin-top: -1300px;
 
Vielleicht kannst du was mit Javascript machen schau dir mal window.scrollTo() Befehl an.
Greez Stryke

Damit kriege ich nur das Fenster gescrollt, aber leider nicht nur das Bild :(

Mit Nachteilen behaftet; aber weise mal dies dem img zu (height und margin-top ggf. anpassen):

Code:
position: absolute;
left: 50%;
top: 50%;
width: 2600px;
height: 2600px;
margin-left: -1300px;
margin-top: -1300px;

Das ist schonmal nicht schlecht, aber eine entscheidende Sache fehlt noch.
Wie schaffe ich es, dass er das Verhältnis neu berechnet, sobald ich die Browsergröße verändere?
 
Werbung:
Mit CSS geht das nicht.
Evtl. mit Javascript, aber damit kenne ich mich nicht aus.
Allerdings sollte das Bild generell immer zentriert sein, wenn sich die absolute Positionierung am body orientiert und dieser 100% breit/hoch ist.

Warum kannst du das img nicht als backgroung-image zuweisen, z.B. den Elementen html oder body?
 
Mit CSS geht das nicht.
Evtl. mit Javascript, aber damit kenne ich mich nicht aus.
Allerdings sollte das Bild generell immer zentriert sein, wenn sich die absolute Positionierung am body orientiert und dieser 100% breit/hoch ist.

Warum kannst du das img nicht als backgroung-image zuweisen, z.B. den Elementen html oder body?

Als Background-Image ging es nicht, weil ich ein JQuery-Plugin verwende.
Gelöst wurde das Problem jetzt, indem das JQuery Plugin umgeschrieben wurde, damit es background-images nimmt (ziemlich doof, dass das nicht mit normalen Image-Tags möglich ist).
Außerdem wurde per Javascript die Breite des Browserfensters abgefragt und mit dem window.onresize Event stetig neu eingestellt.

Echt umständlich, aber anders als mit Javascript ist das wirklich nicht möglich gewesen^^
Danke für eure Hilfe!
 
Zurück
Oben