背景大小为innerhtml大小

Question

从这个脚本中，我获得了浏览器窗口的宽度和高度。我想在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;
     }
 }

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;

}

这是跨浏览器工作的

调整页面元素(div、navs等)的大小您需要查看css media queries和响应式设计(使用%s表示您的宽度+高度)如果您是响应式网站的新手，您可能应该搜索一些材料来阅读这方面的内容

一个简单的示例，展示了一个响应式设计css在媒体查询中的样子

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