人力検索はてな
モバイル版を表示しています。PC版はこちら
i-mobile

現在Webページを作成していますが画像サイズの扱いに困っています。
縦:30?80px 横30?80pxの範囲の画像があります。
その画像のサイズがわからないときに縦横比を崩さずに
ブラウザやjavascriptの縮小機能を使って
64×64内に収まるように表示させたいと考えています。
画像自体には手を加えず、あくまでどこかに配置された
画像を参照する方法でやりたいと思っています。
#PHPなどで画像サイズ取得しリサイズするなどの方法はありますが、
負荷がかかりすぎるので避けたいです。
皆さんだったらどうしますか?お知恵をいただけたらと思います。

●質問者: kamesann
●カテゴリ:インターネット ウェブ制作
✍キーワード:JavaScript PHP Web サイズ ブラウザ
○ 状態 :終了
└ 回答数 : 2/2件

▽最新の回答へ

1 ● katsube
●35ポイント
<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です。

◎質問者からの返答

ありがとうございます!

解決できました!


2 ● GEN111
●35ポイント
<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>

こんな感じでしょうか。

◎質問者からの返答

返事遅くなり申し訳ありません。

本日ためしたところまさに書いていただいたものでできました!!!

ありがとうございました。

関連質問


●質問をもっと探す●



0.人力検索はてなトップ
8.このページを友達に紹介
9.このページの先頭へ
対応機種一覧
お問い合わせ
ヘルプ/お知らせ
ログイン
無料ユーザー登録
はてなトップ