2012-02-28 2 views
1

異なるブラウザサイズに合わせてイメージのサイズを変更しようとしています。私はこのコードを使用しています:JavaScriptサポート率単位はありますか?

document.getElementById("myImg").style.height = (document.body.clientHeight) * 0.5; 

をしかし、それは私がDOCTYPEを使用していない場合、私は私のhtmlファイルにDOCTYPEを使用している場合、それは動作しません動作します。誰かが言った:有効なDTDの属性値は、単位を持っている必要があります使用して

...

だから私は割合部%追加しようとしました:

document.getElementById("myImg").style.height = (document.body.clientHeight) * 0.5 + "%"; 

をしかし、それはdoesnのこれは、代わりにpxユニットでのみ動作します。

document.getElementById("myImg").style.height = (document.body.clientHeight) * 0.5 + "px"; 

どうすればユニットと動作するのですか?pxユニットで動作しますか?それも可能ですか?

+0

あなたは体のclientHeightを取っている場合、結果はピクセル(px)です。 0.5を掛けると結果はピクセル数の半分になります。なぜあなたはその数字をパーセンテージに変えたいのですか? – Travesty3

+0

@ Travesty3:* px *をパーセンテージ*%*に変えようとはしていませんが、画像サイズをウィンドウサイズの50%に設定したいだけです。 – XO39

+1

あなたのコードの最後のビットはそれほど多くあります。私がこれまで使ってきたもっとも簡単な方法は、 'document.documentElement.clientHeight'です。これは、ブラウザ間で互換性が最も高い方法であることが証明されています。本文がウインドウ(スクロールバー付き)よりも大きくなると、あなたのソリューションが期待どおりに機能しないことに注意してください。 – Travesty3

答えて

1

これはOPのために働いているようだソリューションです:

document.getElementById("myImg").style.height = document.documentElement.clientHeight * 0.5 +"px"; 
3

ここで、JavaScriptは...文字列をサポートしています。

問題はほぼ確実にwhat height: 50% (for some value of 50) meansになります。

高さのパーセンテージを指定します。パーセンテージは、生成されたボックスの包含ブロックの高さに対して計算されます。包含ブロックの高さが明示的に指定されていない場合(すなわち内容の高さに依存する)、この要素は絶対的に配置されていない場合、値は 'auto'に計算されます。ルート要素のパーセンテージの高さは、最初に格納されているブロックを基準にしています。

要素がheight: autoに解決親のheightは、任意の割合の高さもautoに解決されます。

パーセントの高さを適用する場合は、親要素のheightを別のものに設定する必要があります。パーセント値に設定すると、祖父母の高さなどを設定する必要があります(ピクセルの高さと見なされるビューポートを押すまで)。

そして最後に%を貼り付けることは作ることが非常に奇妙な計算のように聞こえる、という半減、ピクセル単位で体の高さを取得し、言っ

ブラウザの表示が100ピクセル高い場合、その要素の50%が表示されます。

ブラウザの表示が300px以上の場合、その要素は100%になります。

+0

ありがとうクエンティン。上記のTravesty3への私のコメントで言及したように、私が望むのは、ウィンドウの幅と高さの両方の50%にイメージのサイズを設定することだけです。 – XO39

関連する問題