画像の縮小について

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

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

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

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

No.5 回答者： noname#158634 回答日時： 2011/10/30 21:28

なぜheightも50%にしない？

No.4 回答者： ORUKA1951 回答日時： 2011/10/30 19:33

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

　

　


　

この回答へのお礼

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

お礼日時：2011/10/31 13:23

No.3 回答者： 0909union 回答日時： 2011/10/30 18:54

http://www.htmq.com/style/zoom.shtml

http://msdn.microsoft.com/en-us/library/ms535259 …

http://msdn.microsoft.com/en-us/library/ms535169 …

http://www.microsofttranslator.com/BV.aspx?ref=I …

この回答へのお礼

参考にさせて頂きます。

お礼日時：2011/10/31 13:20

No.2 回答者： k0021 回答日時： 2011/10/30 18:24

<img src="xxx.jpg" style="width:50%;" alt="テスト">

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

この回答へのお礼

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

お礼日時：2011/10/31 13:19

No.1 回答者： Mechirun 回答日時： 2011/10/30 17:39

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

そのサムネイル画像に元の画像にリンクを貼るか、データ容量が非常に大きくなるので圧縮ファイルにリンクを貼りダウンロードさせるのがマナーでしょう。


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

この回答へのお礼

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

お礼日時：2011/10/31 13:15