質問

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

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

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

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

通報する

回答 (5件)

なぜheightも50%にしない?

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

 

 


 

この回答へのお礼

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

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 …

この回答へのお礼

参考にさせて頂きます。

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

この回答へのお礼

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

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


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

この回答へのお礼

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

このQ&Aは役に立ちましたか?0 件

お探しのQ&Aが見つからない時は、教えて!gooで質問しましょう!

新しく質問する

注目の記事

おしトピにAndroid版アプリが登場

話題のトピックにさくっとコメントできる「おしトピ」に Android版アプリが登場! もっと身近に使いやすくなりました。
今ならダウンロードで話題の掃除ロボットや全天球カメラが 当たるプレゼントキャンペーンも実施中。


新しく質問する

このカテゴリの人気Q&Aランキング

毎日見よう!教えて!gooトゥディ

べんりQ&A特集