Hintergrundbild anpassen bei onResize

[aminox]

Hallo,

ich möchte das onResize-Event von JS benutzen, um das Hintergrundbild einer Homepage anzupassen.
Habe dazu folgendes geschrieben:

<script type="application/javascript">
window.onload = function () {
   // initale Breite und Höhe des Browserfensters
   var iWidth = window.innerWidth || 
      (window.document.documentElement.clientWidth || window.document.body.clientWidth);
   var iHeight = window.innerHeight || 
      (window.document.documentElement.clientHeight || window.document.body.clientHeight);
   document.getElementById('backgroundImage').style.width = iWidth + "px" ;
   document.getElementById('backgroundImage').style.left = "50%" ;
   document.getElementById('backgroundImage').style.marginLeft = iWidth / 2 * (-1) + "px";
   
   
   window.onresize = resizeBackground;
}

function resizeBackground()
{
      var width = window.innerWidth || (window.document.documentElement.clientWidth || window.document.body.clientWidth);
      var height = window.innerHeight || (window.document.documentElement.clientHeight || window.document.body.clientHeight);
		  document.getElementById('backgroundImage').style.width = width + "px" ;
		  document.getElementById('backgroundImage').style.left = "50%";
		  width = width / 2 * (-1);
		  window.document.getElementById('backgroundImage').style.marginLeft = width + "px";
		  
}
</script>

Das funktioniert ja soweit auch schön und gut. Nur habe ich jetzt folgende Situation. Wenn die Fensterbreite kleiner wird als die Höhe bzw. die Höhe des Bildes, entsteht unten ein weißraum, weil das Bild dann einfach nicht mehr die Höhe ausfüllt.
Ich glaube, ich stehe gerade etwas auf dem Schlauch, was die Bedingung betrifft.
Oder sollte ich generell die Höhe anpassen und einfach nur die Breite propotional ermitteln?

 

[StupidBoy]

Ich hatte mal ein Script geschriebn das genau dieses problem löst, ich kanns nur leider nicht mehr finden.

Letzendlich ist es aber auch eigentlich nicht schwer. Was du prüfen musst sind die Proportionen - des Hintergrunds und des Fensters (oder wonach du dich richtest). Dann musst du abhängig von den Proportionen prüfen, ob du das Bild in der Höhe oder in der Breite skalieren musst.

Beispiel: Der Hintegrund hat eine geringer Proportion (z.B. 4:3 = 1,333) als das Fenster (z.B. 1,777), dann musst du den Hintergrund in Anhängigkeit der Breite anpassen und entsprechend in der Höhe wenn der Fall entgegensetzt gelagert ist.

Natürlich wäre dein Hintergrund dann höher bzw. breiter als dein Fenster, entsprechend könntest du noch den Höhen-/Breitenunterschied ermitteln, durch zwei dividieren und den Hintergrund um genau diesen wert nach links oder oben aus dem sichtbaren Bereich verschieben (vorausgesetzt, dass du dich bei der Positionierung am oberen bzw. linken Fensterrand orientierst), um den Hintergrund zu zentrieren.

Ich hoffe, dass ich keinen Denkfehler gemacht habe, so sollte es aber eigentlich stimmen.

 

[Quaese]

Hi,

dein Script ändert bei einer Grössenänderung des Fensters auch nur die Breite:

   document.getElementById('backgroundImage').style.width = iWidth + "px" ;
   document.getElementById('backgroundImage').style.left = "50%" ;
   document.getElementById('backgroundImage').style.marginLeft = iWidth / 2 * (-1) + "px";

Es fehlt einfach noch die Änderung für die Höhe:

   document.getElementById('backgroundImage').style.height = iHeight + "px" ;
   document.getElementById('backgroundImage').style.top = "50%" ;
   document.getElementById('backgroundImage').style.marginTop = iHeight / 2 * (-1) + "px";

Ciao
Quaese

 

[aminox]

@StupidBoy
Jepp, das dürfte von der Theorie so hinkommen

@Quaese
Wenn ich die Breite und die Höhe zusammen anpasse, dann kanns aber passieren, dass ich die Hintergrundbilder verzerre... oder?

 

[Quaese]

Ja, das ist richtig, das Hintergrundbild würde verzerrt werden.

Darf das nicht passieren, ist die Methode von @StupidBoy zu empfehlen.

Ciao
Quaese