-PR-
noname#148230

htmlでサイズの大きな画像を貼り付けるのに、等倍で縮小したいんですが、簡単にできるタグって有りますか?

例えば、2000×1000ピクセルを半分にしたい場合、普通はwidth="1000" height="500"にすると思うんですが、これを一括で%で指定する方法ってないでしょうか。

width="50%"でやってみたんですが変な形につぶれてしまったので…
違うのかな、と。

ヘタな説明で分かりにくいかと思いますが、教えてください。
  • 回答数5
  • 気になる数0
  • Aみんなの回答(全5件)

    回答 (全5件)

    • 2011-10-30 17:39:42
    • 回答No.1
    noname#198951

    通常はそのような大きさの画像はディスプレイでは表示できないので、htmlタグで見た目だけ小さくしても表示に必要なデータ量は同じなのでグラフィックツール等で現実に縮小したりかなり縮小したサムネイル画像を貼るというのが一般的です。 そのサムネイル画像に元の画像にリンクを貼るか、データ容量が非常に大きくなるので圧縮ファイルにリンクを貼りダウンロードさせるのがマナーでしょう。 またへんなところでWid ...続きを読む
    通常はそのような大きさの画像はディスプレイでは表示できないので、htmlタグで見た目だけ小さくしても表示に必要なデータ量は同じなのでグラフィックツール等で現実に縮小したりかなり縮小したサムネイル画像を貼るというのが一般的です。
    そのサムネイル画像に元の画像にリンクを貼るか、データ容量が非常に大きくなるので圧縮ファイルにリンクを貼りダウンロードさせるのがマナーでしょう。


    またへんなところでWidth=50%とすると、現在の表示されている画像解像度の半分という指定になるので注意が必要です。
    お礼コメント
    noname#148230

    解像度の半分になってしまうことがあるんですね…
    大変参考になりました。ありがとうございます。
    投稿日時 - 2011-10-31 13:15:37
    • ありがとう数0
    • 2011-10-30 18:24:54
    • 回答No.2
    <img src="xxx.jpg" style="width:50%;" alt="テスト"> 上記記述でないのですか。 縮小したり拡大すうと大きさが変わりますが ...続きを読む
    <img src="xxx.jpg" style="width:50%;" alt="テスト">
    上記記述でないのですか。
    縮小したり拡大すうと大きさが変わりますが
    お礼コメント
    noname#148230

    その記述でないです。
    縮小したり拡大すると大きさが変わるのはわかります。
    投稿日時 - 2011-10-31 13:19:25
    • ありがとう数0
    • 2011-10-30 18:54:09
    • 回答No.3
    http://www.htmq.com/style/zoom.shtml http://msdn.microsoft.com/en-us/library/ms535259(v=VS.85).aspx http://msdn.microsoft.com/en-us/library/ms535169(v=VS.85).aspx http://www.microsofttranslator.com/BV. ...続きを読む
    お礼コメント
    noname#148230

    参考にさせて頂きます。
    投稿日時 - 2011-10-31 13:20:17
    • ありがとう数0
    • 2011-10-30 19:33:44
    • 回答No.4
     HTMLは、通常のサイズ(あまり大きな画像サイズは負荷が大きいので使うべきではない)で、表示したいサイズに画像を縮小して画像を貼り付けます。  また、横幅だけウィンドウに合わせて自由に決めたいときは <p style="position:relative;width:60%;margin:0 auto;"> <img src="images/sample0 ...続きを読む
     HTMLは、通常のサイズ(あまり大きな画像サイズは負荷が大きいので使うべきではない)で、表示したいサイズに画像を縮小して画像を貼り付けます。
     また、横幅だけウィンドウに合わせて自由に決めたいときは
    <p style="position:relative;width:60%;margin:0 auto;">
    <img src="images/sample04.jpg" width="480" height="360" style="display:block;width:100%;height:auto;" alt="河口湖畔から望む富士山の紅葉">
    </p>
    で良いはずです。ウィンドウ巾に合わせて、自在に拡大縮小されます。
     imgは置換インライン要素ですから、画像サイズに合わせて伸縮しますがブロック要素にすることで、自分が所属する親コンテナブロックの内寸を参照できるようになります。

     ポイントは、スタイルシートで、display:block;とheight:autoを指定することです。HTMLの属性、width="" height=""[詳細度(0,0,0,0)]は、その要素(ここではimg)に、スタイル属性(style="")で、それらがあれば[詳細度(1,0,0,0)]上書きされますが、後方互換(スタイルシートを認識しないブラウザのために)、一応記述すべきです。

     

     


     
    お礼コメント
    noname#148230

    詳細かつとても分かりやすく、参考になりました。
    ありがとうございます。
    投稿日時 - 2011-10-31 13:23:43
    • ありがとう数0
    • 2011-10-30 21:28:51
    • 回答No.5
    noname#158634

    なぜheightも50%にしない?
    なぜheightも50%にしない?
    • ありがとう数0
    • 回答数5
    • 気になる数0
    • ありがとう数0
    • ありがとう
    • なるほど、役に立ったなど
      感じた思いを「ありがとう」で
      伝えてください
    • 質問する
    • 知りたいこと、悩んでいることを
      投稿してみましょう
    こんな書き方もあるよ!この情報は知ってる?あなたの知識を教えて!
    このQ&Aにはまだコメントがありません。
    あなたの思ったこと、知っていることをここにコメントしてみましょう。

    関連するQ&A

    -PR-
    -PR-

    その他の関連するQ&Aをキーワードで探す

    別のキーワードで再検索する
    -PR-
    -PR-
    -PR-

    特集


    成功のポイントとは?M&Aで経営の不安を解決!

    -PR-

    ピックアップ

    -PR-
    ページ先頭へ