HTML 画像 可変させたい

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

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

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

No.2 ベストアンサー 回答者： taloo 回答日時： 2011/08/01 03:27

画像の幅をウインドウサイズに合わせるのは

img{width:100%}
で行けると思いますが、
#boxB2,#boxD2{width:45%}ではなく、#boxB2,#boxD2{width:400px}でもいいと思います。

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

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

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

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

No.1 回答者： noname#138894 回答日時： 2011/08/01 02:27

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

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

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

この回答へのお礼

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

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

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

お礼日時：2011/08/01 14:45