HTML 画像 可変させたい

質問

まずこのページを見て頂きたいです。
http://zisaku.pelolias.com/contents/practice/OPTICAL.html

ブラウザの横幅を小さくすると画像と画像がかぶったり、真ん中の赤の縦線にかぶったりしてしまいます。
横幅を大きくすると画像が小さく感じ、スペースを有効活用できていない気がします。
ブラウザの横幅を変えると、画像も可変する、ようなことは可能でしょうか？
可能ならば是非ご教授お願いいたします・・・。

回答宜しくお願いいたします。

回答No.2

神崎 渉瑠（@taloo） · ベストアンサー

画像の幅をウインドウサイズに合わせるのは
img{width:100%}
で行けると思いますが、
#boxB2,#boxD2{width:45%}ではなく、#boxB2,#boxD2{width:400px}でもいいと思います。

小さな画面で見てる人だけじゃなくて、1920x1080の大画面で見てる人もいます。
そういう人には、画像が大きく間延びした感じになるんじゃないでしょうか。

----------------以下余談っぽいもの。
http://home.wi-wi.jp/blog/2011/07/25/liquid-grid-multicolumn-layout/
私が考える「リキッドレイアウト」とは、こういうのなんですけどね。
（全種類をリキッドレイアウトと言えなくもないんですが、それなら「（大分類）リキッドレイアウトの（小分類）○○レイアウト」という分け方をしないと、同音異義語ではわからないと思います。）

45%のは上記の可変幅ですが、
#boxB2,#boxD2{width:400px}とすることで、上記の固定幅を実現します。

可変幅の中に大きな画像を入れるパターンは失念してたなあ。。。
グリッドレイアウトではoverflowを使うことが多いのですが。

回答No.1

noname#138894

一番簡単なのは、img のスタイルにwidth:100% を指定することかと思います。

もう少し凝るのであれば、
javascriptを使って現在のウィンドウ幅から画像サイズを動的に変更することが出来ます。

例えば
http://soft.fpso.jp/optfiles/image_resize/
のページは
http://soft.fpso.jp/develop/javascript-develop/entry_2648.html
で配布されているプログラムのデモです。

お礼

widthで％表示できるのは知りませんでした！
それで行きたいと思います！

javascriptのほうは、試してみたんですけど良くわからなかったので諦めました（汗

ありがとうございました！