0

私がOperaブラウザで抱えているこの奇妙な問題を誰かが助けてくれることを願っています。バージョン11ベータ版をインストールしていますが、Operaの一般的な問題だと思います。

問題のウェブサイトとページはhttp://www.amigaos.net/index.htmlです。

HTMLの本文の下部に、ページの読み込み時にビューポートの幅に応じて、このWebページに表示される3つの画像のサイズを変更する次のコードがあります。SafariとFireFoxではコードは正常に機能しますが、Operaでは画像の幅と高さのサイズ変更を伴う次の行は機能しません。

document.getElementById('img1').width = '475';
document.getElementById('img1').height = '375';

これが完全なコードです（レイアウトについては、stackoverflowがキャリッジリターンを正しくフォーマットしていません）

<script type="text/javascript">
 function GetWidth()
 {
   var x = 0;
   if (typeof window.innerWidth != 'undefined')
   {
     x = window.innerWidth;
   }
   else if (document.documentElement && document.documentElement.clientHeight)
   {
     x = document.documentElement.clientWidth;
   }
   else if (document.body)
   {
     x = document.getElementsByTagName('body')[0].clientWidth;
   }
   return x;
 }

 width = GetWidth();

 if (width>=1680)
 {
  document.getElementById('img1').width = '475';
  document.getElementById('img1').height = '375';
  document.getElementById('img2').width = '475';
  document.getElementById('img2').height = '375';
  document.getElementById('img3').width = '475';
  document.getElementById('img3').height = '375';
 }
 else if ((width>800) && (width<=1280))
 {
  document.getElementById('img1').width = '300';
  document.getElementById('img1').height = '235';
  document.getElementById('img2').width = '300';
  document.getElementById('img2').height = '235';
  document.getElementById('img3').width = '300';
  document.getElementById('img3').height = '235';
 }
 else if (width<=800)
 {
  document.getElementById('img1').width = '225';
  document.getElementById('img1').height = '195';
  document.getElementById('img2').width = '225';
  document.getElementById('img2').height = '195';
  document.getElementById('img3').width = '225';
  document.getElementById('img3').height = '195';
 }
</script>
4

2 に答える 2

0

あなたはこの方法を複雑にしすぎています。あなたの問題はブラウザ固有のものではないと思います。スクリプトを再コーディングする必要があるだけです。

初め。パーセンテージを使用することをお勧めします。訪問者のブラウザーの幅をピクセル単位で推測する方法がわかりません。

3 つのサイズ変更可能な画像がブラウザーの幅の 20% であるとします。したがって、あなたのcssは次のようになります。

#img1, #img2, #img3 {
  width: 20%;
}

あなたの CSS は、あなたの画像が全体の 20% であると言っているので、いくつかの js を追加するのは良いことです。パーセンテージは、その外側のコンテナーのパーセンテージになることに注意してください。

<script type=text/javascript">
  function resizeImages() {
     document.getElementById('img1').style.height = (document.body.clientHeight - 100) * 0.2;
     document.getElementById('img2').style.height = (document.body.clientHeight - 100) * 0.2;
     document.getElementById('img3').style.height = (document.body.clientHeight - 100) * 0.2;
  }
</script>

そして最も重要なこと..関数を呼び出します：

これを body タグに追加します。

<body onresize="resizeImages()">

ブーム..完了です。

于 2010-12-01T21:51:18.827 に答える
0

幅と高さの属性を設定する代わりに、CSS で width: 33% を設定するだけで、ブラウザー ウィンドウのサイズに関係なく自動的にスケーリングを行うことができると思います。JavaScript、IMHOを使用しようとするよりも優れたソリューションです。

ここに簡単なチュートリアルがあります: http://haslayout.net/css-tuts/CSS-Proportional-Image-Scale

于 2010-12-01T21:31:16.980 に答える