総ありがとう数 累計4,332万(2014年12月23日現在)

毎月4,000万人が利用!Q&Aでみんなで助け合い!

-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タグで見た目だけ小さくしても表示に必要なデータ量は同じなのでグラフィックツール等で現実に縮小したりかなり縮小したサムネイル画像を貼るというのが一般的です。
そのサムネイル画像に元の画像にリンクを貼るか、データ容量が非常に大きくなるので圧縮ファイルにリンクを貼りダウンロードさせるのがマナーでしょう。


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

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

その記述でないです。
縮小したり拡大すると大きさが変わるのはわかります。
投稿日時 - 2011-10-31 13:19:25
  • 同意数0(0-0)
  • ありがとう数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.aspx?ref=IE8Activity&a=http%3A%2F%2Fmsdn.microsoft.com%2Fen-us%2Flibrary%2Fms535169%28v%3DVS.85%29.aspx
お礼コメント
noname#148230

参考にさせて頂きます。
投稿日時 - 2011-10-31 13:20:17
  • 同意数0(0-0)
  • ありがとう数0
  • 2011-10-30 19:33:44
  • 回答No.4
 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(0-0)
  • ありがとう数0
  • 2011-10-30 21:28:51
  • 回答No.5
noname#158634

なぜheightも50%にしない?
  • 同意数0(0-0)
  • ありがとう数0
  • 回答数5
  • 気になる数0
  • ありがとう数0
  • ありがとう
  • なるほど、役に立ったなど
    感じた思いを「ありがとう」で
    伝えてください

関連するQ&A

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

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

あなたの悩みをみんなに解決してもらいましょう

  • 質問する
  • 知りたいこと、悩んでいることを
    投稿してみましょう
-PR-
-PR-
-PR-

特集


年賀状のマナーや作り方を学べるQ&A特集!

関連するQ&A

-PR-

ピックアップ

-PR-
ページ先頭へ