OperaブラウザでJavascriptを使用して画像のサイズを変更する

私はOpera Browserでこの奇妙な問題を助けてくれることを願っています。バージョン11 Betaがインストールされていますが、Operaではよくある問題です。OperaブラウザでJavascriptを使用して画像のサイズを変更する

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

htmlの本文の下には、ページロード時のビューポートの幅に応じてこのWebページに表示される3つのイメージのサイズを変更するコードがあります。 SafariやFirefoxでコードが正常に動作しますが、Operaで画像の幅と高さをリサイズ伴う次の行では動作しません：

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

ここでフル（申し訳ありませんが、レイアウトについて、stackoverflowの中のコードがありますCSSを経由して33％とスケーリングは関係なく、ブラウザのウィンドウサイズの、自動的に行われます：）が正しく

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

出典

2010-12-01 Richard Lake

fyi：1と0の束があるテキストエディタのボタンを参照してください。コードをハイライトし、それを押して適切にフォーマットします。 –

ブラウザウィンドウのサイズを変更しても機能しません。 –

の代わりに、幅と高さの属性をやってキャリッジリターンをフォーマットしていない、私はあなただけの幅を設定することができると思います。 javascriptを使用しようとするよりも優れたソリューション、IMHO。あなたはこの方法が複雑すぎる作っているhttp://haslayout.net/css-tuts/CSS-Proportional-Image-Scale

出典

2010-12-01 21:31:16

：

は簡単なチュートリアルです。あなたの問題はブラウザ固有のものではないと思うので、スクリプトを再コードするだけです。

最初。私はパーセントを使用してrecommmend ..どのようにピクセルで訪問者のブラウザの幅を推測するか分からない。

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 onresize="resizeImages()">

ブームを..あなたは完了です。

出典

2010-12-01 21:51:18

（注：onresize属性は任意のdivに追加できますが、私はこれをテストしていません） –

OperaブラウザでJavascriptを使用して画像のサイズを変更する

答えて

関連する問題