縦:30~80px 横30~80pxの範囲の画像があります。
その画像のサイズがわからないときに縦横比を崩さずに
ブラウザやjavascriptの縮小機能を使って
64×64内に収まるように表示させたいと考えています。
画像自体には手を加えず、あくまでどこかに配置された
画像を参照する方法でやりたいと思っています。
#PHPなどで画像サイズ取得しリサイズするなどの方法はありますが、
負荷がかかりすぎるので避けたいです。
皆さんだったらどうしますか?お知恵をいただけたらと思います。
<img src="http://www.hatena.ne.jp/images/top/h1.gif" id="img1"> <script> document.getElementById('img1').style.width = 80; document.getElementById('img1').style.height = 80; </script>
な感じで画像のサイズを設定できます。
<img src="http://www.hatena.ne.jp/images/top/h1.gif" id="img1"> <script> var width = document.getElementById('img1').style.width; var width = document.getElementById('img1').style.height; </script>
とすれば現在の画像サイズを取得できますので、取得した値から縮小する比率を計算して設定してやればOKです。
<html> <head> <script type="text/javascript"> size = 64 ; function resize(id) { if (document.images[id].width > document.images[id].height) document.images[id].width = size ; else document.images[id].height = size ; } </script> </head> <body> <img src="./image1.jpg" id="sample1" onLoad="resize('sample1')" /> <img src="./image2.jpg" id="sample2" onLoad="resize('sample2')" /> </body> </html>
こんな感じでしょうか。
返事遅くなり申し訳ありません。
本日ためしたところまさに書いていただいたものでできました!!!
ありがとうございました。
ありがとうございます!
解決できました!