-6 
<html>
  <head>
    <link rel="stylesheet" href="style.css" type="text/css" />
  </head>
  <body>
    <img src="spacer--1200x800.png" width="1200" height="800" />
  </body>
</html>

这是CSS代码

body {
    background-image: url('b2.jpg');
    background-repeat:no-repeat;
    background-size:contain;
    height: auto;
    width: 100%;
    margin:0px auto;
    overflow:hidden;
}

请检查上面的代码。缩小网络浏览器时，图像正在正确调整大小，但我需要在调整图像大小的同时调整窗口高度。我不需要那个空白空间，所以如果调整宽度，我需要自动调整高度，就像那个图像一样。

4

1 回答 1

1

这不是一个好主意。调整窗口大小是不受欢迎的，在最近的浏览器版本中很少允许这样做。请参阅这些关于 Firefox 强加的规则的说明。

但是，如果允许您调整窗口大小，则可以使用使用, , ,window.resizeTo计算的正确参数进行调用。window.innerWidthwindow.innerHeightwindow.outerWidthwindow.outerHeight

像这样的东西应该工作：

window.onresize = function() {
    var targetInnerHeight = window.innerWidth * 800 / 1200;
    var heightDiff = window.outerHeight - window.innerHeight;
    var targetOuterHeight = targetInnerHeight + heightDiff;
    window.resizeTo(window.outerWidth, targetOuterHeight);
}

但同样，你不应该这样做，在大多数情况下，出于安全原因，浏览器不会让你这样做，并且操纵用户的浏览器并阻止用户随意调整浏览器的大小是不好的。

于 2013-01-05T08:17:53.827 回答