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

Hintergrund skalieren

M

MiST3R_C0R3

Neues Mitglied
Hallo,
ich schreibe sofort in den Javascript bereich, weil ich glaube, dass ich rein mit CSS nicht weit komme.

Ich bastle gerade ein Wenig mit CSS rum und versuche, einen "Hintergrund" auf die gesamte Fenster größe zu Skalieren. Mein Ansatz war folgender:

Code: 
<body>
<div id="scale">
    <img src="1280x.jpg" border="0" alt="" />
</div>
</body>

Und CSS:

Code: 
            body { overflow: hidden; padding: 0; margin: 0; }
            
            #scale {
                position: absolute;
                width: 100%;
                height: 100%;
            }
            
            #scale img { width: 100%; }

Soweit funktioniert diese Variante gut. Da es sich nun aber um ein Bild z.b. von einer Luftaufnahme von Berlin handelt, ist dieses Bild eher im Querformat. Wenn jemand sein Browserfenster nun aber höher hat, als es breit ist, bekomme ich unten einen weißen Rand, Logischerweiße skaliert es ja auf die Breite. Mit height: 100%; zusätzlich möchte ich nicht arbeiten, da die Bilder dann nur häßlig verzerrt werden.

Gibt es einen guten Lösungsansatz mit Javascript oder vielleicht ja doch noch mit CSS?

Grüße,
Max
 
Nutze nun folgendes um festzustellen, ob es höher als breit ist und skaliere anschließend:

Code: 
            $(document).ready(function() {
                var viewportheight = window.innerHeight ? window.innerHeight : $(window).height();
                var viewportwidth = window.innerWidth ? window.innerWidth : $(window).width();
            
                if(viewportheight > viewportwidth)
                    $('#scale img').css('height', '100%');
                else
                    $('#scale img').css('width', '100%');
            });

Wenn ich nun die Seite aber lade mit einem Fenster, bei dem das Fenster höher als Breit ist und danach in den Vollbildmodus gehe, hab ich rechts weiße Ränder.

Was mir jetzt einzig und alleine noch fehlt, ist festzustellen, ob sich die Browsergröße geändert hat, und wenn ja, neu zu berechnen.
Hat hier jemand eine Idee?
 
Du musst dich einloggen oder registrieren, um hier zu antworten.

Neueste Beiträge

Zurück
Oben