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

上記のコードを確認してください。Web ブラウザーを縮小すると、画像は適切にサイズ変更されますが、画像のサイズ変更と同時にウィンドウの高さを変更する必要があります。その空白は必要ないので、幅がサイズ変更された場合、その画像のように高さを自動的にサイズ変更する必要があります。

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 に答える