Question

从这个脚本中，我从浏览器窗口获得了宽度和高度。我想将html中的backgroundimage设置为100％for thissize。（无论屏幕大小如何）。其他元素（导航栏，文本，图片或svg）必须调整大小。

- ＆GT;我想要任何时候都没有滚动条：）

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

Answer 1

不是100％肯定你在问什么，但我认为你正在尝试拉伸你的背景图像以匹配浏览器的宽度/高度.....你要走的路径看起来更加复杂，为什么不是你尝试一些简单的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;

}

这适用于crossbrowser

要调整页面元素（div，nav等）的大小，您需要查看 css媒体查询和响应式设计（使用％'s表示宽度+高度如果你不熟悉响应网站，你应该谷歌一些材料来阅读这篇文章

快速举例说明响应式设计css在媒体查询中可能会是什么样子

#container { 
 width: 900px;
 margin: 0 auto;
}
@media (max-width: 900px) {
 #container { 
  width: 100%;
 }
}

背景大小是innerhtml大小

1 个答案: