0

このスクリプトから、ブラウザ ウィンドウから幅と高さを取得しました。このサイズの html の背景画像を 100% に設定したいと思います。（画面サイズは問いません）。その他の要素 (ナビゲーション バー、テキスト、画像、または SVG) は、サイズに合わせて調整する必要があります。

--> いつでもスクロール バーが必要ありません :)

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);

    var bWin = document.getElementById('bWin');
    bWin.innerHTML = "Fensterbreite " + iWidth + " <br />Fensterhöhe " + iHeight;
    window.onresize = function (evt) 
    {
         var width = window.innerWidth || (window.document.documentElement.clientWitdh || window.document.body.clientWidth);
         var height = window.innerHeight || (window.document.documentElement.clientHeight || window.document.body.clientHeight);
         var bWin = document.getElementById('bWin');
         bWin.innerHTML = "Aktuelle Breite " + width + "  <br />Aktuelle Höhe  " + height;
     }
 }
4

1 に答える 1

1

Not 100% sure what you are asking, but I think you are trying to stretch your background-image to match the width/height of your browser..... the path you are going looks extra complex, why dont you try some simple CSS

body,html { width: 100%; height 100%; }

body {
        background: url(images/bg.jpg) no-repeat center center fixed;
        -webkit-background-size: cover;
        -moz-background-size: cover;
        -o-background-size: cover;
        background-size: cover;
        /*ie8 Fix*/
         filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='.myBackground.jpg', sizingMethod='scale');
-ms-filter: "progid:DXImageTransform.Microsoft.AlphaImageLoader(src='myBackground.jpg', sizingMethod='scale')";
zoom:1;

}

this works crossbrowser

to resize your page elements (divs, navs etc.) you need to look at css media queries and responsive design (using %'s for your widths + heights) you should probably google some material to read up on this if you are new to responsive websites

A quick example of what a responsive design css might look like with media queries

#container { 
 width: 900px;
 margin: 0 auto;
}
@media (max-width: 900px) {
 #container { 
  width: 100%;
 }
}
于 2013-11-07T14:58:27.513 に答える