Javascriptによる画像サイズ変更

JavaScriptを使って画像をプロポーショナルにリサイズする方法をご存知の方はいらっしゃいますか？

その場で height や width の属性を追加して DOM を修正しようとしましたが、IE6 ではうまくいかなかったようです。

Adriano
編集された質問 9日 8月 2018 в 3:44
プログラミング
internet-explorer-6 javascript image-manipulation
4日 10月 2008 в 4:39
まだビューはありません
ソリューション

画像をプロポーショナルに変更するには、単純にwidth/heightのcssプロパティの片方だけを変更し、もう片方はautoにしておきます。

image.style.width = '50%'
image.style.height = 'auto'

これにより、アスペクト比が変わらないようになります。

ブラウザは画像をきれいにリサイズするのが苦手な傾向にあることを覚えておいてください。

解説 (1)

画像の高さや幅の属性を変更する代わりに、CSSの高さや幅を変更してみてください。

myimg = document.getElementById('myimg');
myimg.style.height = "50px";
myimg.style.width = "50px";

よくある失敗例としては、heightとwidthのスタイルが、上記の例では"px"のように単位を含む文字列であることです。

編集 - style.heightやstyle.widthを使わずに、高さや幅を直接設定すればうまくいくと思います。また、元の寸法がすでにあるという利点もあります。あなたのコードを少し掲載していただけますか？quirksモードではなく、standardモードになっていますか？

これで動くはずです。

myimg = document.getElementById('myimg');
myimg.height = myimg.height * 2;
myimg.width = myimg.width * 2;
Neall
編集した答え 4日 10月 2008 в 4:51
解説 (0)

以下のコードを試したところ、WinXP Pro SP3のIE6で問題なく動作しました。

function Resize(imgId)
{
  var img = document.getElementById(imgId);
  var w = img.width, h = img.height;
  w /= 2; h /= 2;
  img.width = w; img.height = h;
}

また、FF3とOpera9.26でもOKです。

解説 (0)