HTMLで<img>で画像を表示するときに、縦横比を固定したまま、縦と横の上限サイズを指定するにはどのようにすればよろしいのでしょうか?

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

回答の条件
  • URL必須
  • 1人2回まで
  • 登録:2007/05/16 23:26:54
  • 終了:2007/05/17 07:08:06

ベストアンサー

id:GEN111 No.2

GEN111回答回数472ベストアンサー獲得回数582007/05/17 01:08:09

ポイント100pt

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

id:pomo123

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

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

2007/05/17 07:06:06

その他の回答(1件)

id:daichan330 No.1

ʕ •ᴥ•ʔ<だ 回答回数565ベストアンサー獲得回数1062007/05/17 00:39:09

ポイント10pt

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

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


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

id:pomo123

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

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

2007/05/17 00:45:35
id:GEN111 No.2

GEN111回答回数472ベストアンサー獲得回数582007/05/17 01:08:09ここでベストアンサー

ポイント100pt

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

id:pomo123

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

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

2007/05/17 07:06:06

コメントはまだありません

この質問への反応(ブックマークコメント)

トラックバック

「あの人に答えてほしい」「この質問はあの人が答えられそう」というときに、回答リクエストを送ってみてましょう。

これ以上回答リクエストを送信することはできません。制限について

絞り込み :
はてなココの「ともだち」を表示します。
回答リクエストを送信したユーザーはいません