mediengestalter.info
FAQ :: Mitgliederliste :: MGi Team

Willkommen auf dem Portal für Mediengestalter

Aktuelles Datum und Uhrzeit: Fr 29.03.2024 15:43 Benutzername: Passwort: Auto-Login

Thema: Bild an Seitengröße anpassen vom 19.03.2009


Neues Thema eröffnen   Neue Antwort erstellen MGi Foren-Übersicht -> Programmierung -> Bild an Seitengröße anpassen
Autor Nachricht
gerch2003
Threadersteller

Dabei seit: 07.07.2008
Ort: -
Alter: 63
Geschlecht: Männlich
Verfasst Do 19.03.2009 15:22
Titel

Bild an Seitengröße anpassen

Antworten mit Zitat Zum Seitenanfang

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
  View user's profile Private Nachricht senden Website dieses Benutzers besuchen
danielkussin

Dabei seit: 04.06.2008
Ort: Hamburg
Alter: 42
Geschlecht: Männlich
Verfasst Do 19.03.2009 15:46
Titel

Re: Bild an Seitengröße anpassen

Antworten mit Zitat Zum Seitenanfang

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
  View user's profile Private Nachricht senden Website dieses Benutzers besuchen
Anzeige
Anzeige
gerch2003
Threadersteller

Dabei seit: 07.07.2008
Ort: -
Alter: 63
Geschlecht: Männlich
Verfasst Do 19.03.2009 16:02
Titel

Re: Bild an Seitengröße anpassen

Antworten mit Zitat Zum Seitenanfang

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.
  View user's profile Private Nachricht senden Website dieses Benutzers besuchen
danielkussin

Dabei seit: 04.06.2008
Ort: Hamburg
Alter: 42
Geschlecht: Männlich
Verfasst Do 19.03.2009 16:55
Titel

Antworten mit Zitat Zum Seitenanfang

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
  View user's profile Private Nachricht senden Website dieses Benutzers besuchen
gerch2003
Threadersteller

Dabei seit: 07.07.2008
Ort: -
Alter: 63
Geschlecht: Männlich
Verfasst Do 19.03.2009 22:17
Titel

Antworten mit Zitat Zum Seitenanfang

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 Lächel
Des kann ich nämlich aus deinem Code nicht so wirklich rauslesen

Gruß Gerch
  View user's profile Private Nachricht senden Website dieses Benutzers besuchen
pixelpapst303

Dabei seit: 06.07.2006
Ort: hamburg
Alter: 50
Geschlecht: Männlich
Verfasst Fr 20.03.2009 07:33
Titel

Antworten mit Zitat Zum Seitenanfang

gerch2003 hat geschrieben:

Aber erklär mir doch mal bitte warum das so funktioniert, wie es funktioniert Lächel


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...
  View user's profile Private Nachricht senden Website dieses Benutzers besuchen
danielkussin

Dabei seit: 04.06.2008
Ort: Hamburg
Alter: 42
Geschlecht: Männlich
Verfasst Fr 20.03.2009 09:00
Titel

Antworten mit Zitat Zum Seitenanfang

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
  View user's profile Private Nachricht senden Website dieses Benutzers besuchen
gerch2003
Threadersteller

Dabei seit: 07.07.2008
Ort: -
Alter: 63
Geschlecht: Männlich
Verfasst Fr 20.03.2009 15:22
Titel

Antworten mit Zitat Zum Seitenanfang

Gerch, Verstanden.

Ende

*zwinker*

Und danke euch Lächel
  View user's profile Private Nachricht senden Website dieses Benutzers besuchen
 
Ä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
Neues Thema eröffnen   Neue Antwort erstellen
MGi Foren-Übersicht -> Programmierung


Du kannst keine Beiträge in dieses Forum schreiben.
Du kannst auf Beiträge in diesem Forum nicht antworten.
Du kannst an Umfragen in diesem Forum nicht mitmachen.