Question

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

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

Answer 1

这不是个好主意。调整窗口大小是不受欢迎的，并且在最近的浏览器版本中很少允许。有关Firefox施加的规则，请参阅these notes。

但是，如果允许您调整窗口大小，则可以使用window.resizeTo，window.innerWidth，window.innerHeight计算正确的参数来调用window.outerWidth， window.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);
}

但是，你不应该这样做，在大多数情况下，出于安全原因，浏览器不允许你这样做，并且操纵用户的浏览器并防止用户随心所欲地调整浏览器的大小。

收缩时保留浏览器窗口宽高比

1 个答案: