• Das Erstellen neuer Accounts wurde ausgesetzt. Bei berechtigtem Interesse bitte Kontaktaufnahme über die üblichen Wege. Beste Grüße der Admin

Grafik bildschirmfüllend - Proportionale Anpassung an Browserfenster

J

jilli

New member
Hallo Forum,

für meinen Kunden soll als Vorschlatseite ein Foto bildschirmfüllend integriert werden. Das Foto soll sich der Größe des Browserfensters proportional anpassen.

Ich habe bereits eine Grafik inkl. JS integriert. Soweit funktioniert alles. Wenn ich das Browserfenster über die Diagonal verkleiner, passt sich die Grafik an. Wenn ich es jedoch schmal ziehe passt sich die Grafik unproportional an. Wenn das Browserfenster schmal gezogen wird, kann die Grafik ruhig beschnitten wird - die Proportionen sollen aber erhalten bleiben.

Wie löse ich das Problem?

Ich freue mich auf Eure Tipps.

Danke vorab - Jilli

WebSite anschauen

HTML: 
<?xml version="1.0" encoding="iso-8859-1"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
     "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>jefferys gmbh | FASHION CONCEPTS & DESIGN - Corporate Fashion & Sportswear</title>
<style type="text/css">
  <!--
* { margin: 0;
    padding: 0;}

/* Höhen- und Breitenanpassung zu 100%; Scrollbar ausblenden */
body, html{ width: 100%;
            height: 100%;
            overflow: hidden;}

/* BG-Image auf unterste Ebene anordnen */
#bgImg{ position: absolute;
        top: 0;
        left: 0;
        border: 0;
        z-index: 1;}
/* Body-Dummy absolut über BG-Image legen; Scrollbar bei Bedarf einblenden */
#bodyDiv{ position: absolute;
          top: 0;
          left: 0;
          z-index: 2;
          overflow: auto;
          width: 100%;
		   height: 100%;
  		
          text-align: center;}


 //-->
</style>
</head>
<body>

<div id="bodyDiv">
  <a href="index2.htm"><img id="bgImg" src="images/xmas.jpg" width="100%" height="100%" alt="ENTER"></a>
</div>
</body>
</html>
 
Du darfst hald nur entweder width="100%" oder height="100%" angeben - je nach dem, was du haben willst.

PS: mit JS hat das aber jetzt nichts zu tun.
 
Hallo kkapsner,

Danke für Deine Antwort. Ich wollte nich JS schreiben, sondern natürlich CSS.

Lasse ich die Breite oder Höhe weg, dann wir garnichts angezeigt. Das hatte ich bereits vorher versucht.

Ich habe
height bzw width komplett weggelassen
nur das 100% weglassen

Immer das gleiche Ergebnis - weißer Bildschirm.

Noch eine Idee?

Danke - Jilli
 
1. Du bist außerdem noch im falschen Forum (-> ich verschieb's)
2. Ich habe nicht vom CSS, sondern von HTML geredet.
 
Oder du realisierst das doch mit JS/jQuery was dann wiederum CSS und HTML valide wäre:
z.B.
Code: 
width: 100%
Und dann per JS die dazu proportionale Höhe ausrechnen lassen, indem du u.a. den Faktor ausrechnest und dann die aktuelle breite bestimmst. Danach mit dem Faktor...
*Geistesblitz*-müsste aber klappen.
 
Du musst dich einloggen oder registrieren, um hier zu antworten.
Zurück
Oben