画像の縮小について

質問

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

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

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

ヘタな説明で分かりにくいかと思いますが、教えてください。

回答No.5

noname#158634

なぜheightも50%にしない？

回答No.4

ORUKA1951

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)]上書きされますが、後方互換(スタイルシートを認識しないブラウザのために)、一応記述すべきです。

お礼

詳細かつとても分かりやすく、参考になりました。
ありがとうございます。

回答No.3

0909union

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

お礼

参考にさせて頂きます。

回答No.2

k0021

<img src="xxx.jpg" style="width:50%;" alt="テスト">
上記記述でないのですか。
縮小したり拡大すうと大きさが変わりますが

お礼

その記述でないです。
縮小したり拡大すると大きさが変わるのはわかります。

回答No.1

noname#198951

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

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

お礼

解像度の半分になってしまうことがあるんですね…
大変参考になりました。ありがとうございます。