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

HTMLで<img>で画像を表示するときに、縦横比を固定したまま、縦と横の上限サイズを指定するにはどのようにすればよろしいのでしょうか?
Firefoxだと、
<img src="a.png" style="max-width:100; max-height:50;">
とすれば所望のことができるのですが、ie6のようにこの記述をサポートしていないブラウザでは、どのようにすればよろしいですか?
たとえば、Javascriptと組合せることでできますか?

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

▽最新の回答へ

1 ● ? ????<だ
●10ポイント

<img>タグでは、WIDTH属性(横幅指定)とHEIGHT属性(縦幅指定)が指定できるはずですが、それでもダメでしょうか?

http://www.htmq.com/html/img.shtml


もっとも縦横比固定は自分で計算しないとダメですが。

◎質問者からの返答

"縦横比を固定したまま"がポイントです。

の中でWIDTH属性とHEIGHT属性を両方とも指定すると、縦横比が崩れてしまいます。


2 ● GEN111
●100ポイント ベストアンサー

JavaScript で作ってみました。

<html>
 <head>
 <script type="text/javascript">
 max_width = 100 ;
 max_height = 50 ;

 function keep_max() {
 for (i in document.images) {
 if (document.images[i].width > document.images[i].height &amp; document.images[i].width > max_width) {
 document.images[i].width = max_width ;
 }
 else {
 if (document.images[i].height > max_height) { document.images[i].height = max_height ; }
 }
 }
 }
 </script>
 </head>

 <body onload="keep_max()">
 <img src="./1.jpg" />
 <img src="./2.jpg" />
 <img src="./3.jpg" />
 <img src="./4.jpg" />
 </body>
</html>

ただしこれだとすべての画像に適用されるので、

特定の画像だけリサイズする場合は

<html>
 <head>
 <script type="text/javascript">
 max_width = 100 ;
 max_height = 50 ;

 function keep_max() {
 for (i in document.images) {
 if (document.images[i].className != 'gazou_type') continue ; // gazou_type は適当に変更してください
 if (document.images[i].width > document.images[i].height &amp; document.images[i].width > max_width) {
 document.images[i].width = max_width ;
 }
 else {
 if (document.images[i].height > max_height) { document.images[i].height = max_height ; }
 }
 }
 }
 </script>
 </head>

 <body onload="keep_max()">
 <img src="./1.jpg" />
 <img src="./2.jpg" class="gazou_type" /> 変更対象の画像に class名を付ける
 <img src="./3.jpg" class="gazou_type" />
 <img src="./4.jpg" />
 </body>
</html>

こんな感じ。


JavaScript - Wikipedia

◎質問者からの返答

ieでも縦横比を維持したまま画像を縮小することができました。

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

関連質問


●質問をもっと探す●



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