ブラウザ伸縮に合わせてdiv中身も一緒に伸縮したい

質問

cssの transform:scale 等を使用して、ブラウザの伸縮に合わせてdivの中身（画像等）も一緒に伸縮したいのですが、どのようにすれば実現できるか、ご教授頂けると大変助かります。

何卒、宜しくお願いします。

回答No.2

ORUKA1951 · ベストアンサー

＞どうしてもブラウザを伸縮させたときに、divの背景の位置と画像の位置が合わなくなるのです。
　そんなはずありません。

　背景画像は、background-size:で、画像はwidth:height:で指定し、位置は%で指定しますが、background-sizeは後方互換の問題と、縦サイズを決定できない問題のため難しいです。
　そのため、背景にする画像も画像としてマークアップしておき、コンテナブロックの位置・サイズを基準に%で絶対配置すれば良いです。

<div class="nav" id="siteMap">
＿<p><img src="./images/background/ABCD.gif" width="420" height="314" alt="">
＿<ol>
＿＿<li><a href="A"><img src="./images/A.gif" width="48" height="48" alt="Aへ"></a></li>
＿＿<li><a href="B"><img src="./images/B.gif" width="48" height="48" alt="Bへ"></a></li>
＿＿<li><a href="C"><img src="./images/C.gif" width="48" height="48" alt="Cへ"></a></li>
＿</ol>
</div>

#siteMap{width:40%;margin:0 auto;padding:0;position:relative;}
#siteMap p{margin:0;}
#siteMap p img{display:block;width:100%;height:auto;}
#siteMap ol,#siteMap ol li{display:block;list-style:none;margin:0;padding:0;width:100%;}
#siteMap ol li img{display:block;width:12%;height:auto;position:absolute;}
#siteMap ol li a img{top:27.8%;left:4%;}
#siteMap ol li a[href="B"] img{left:18%;}
#siteMap ol li a[href="C"] img{left:31%;}

　サイズと位置の指定方法のもっとも基本的な部分なので、そのまま基本に忠実に指定していけばよいです。
　⇒10. 視覚整形モデル詳細( http://www.swlab.it.okayama-u.ac.jp/man/rec-css2/visudet.html )
　難しく考えすぎでは？

お礼

ORUKA1951様

ご回答有難う御座います。

上記の様に試してみたところ、
実現できました。
ORUKA1951さんの言う通り、何か難しく考えすぎたようです。

大変助かりました。有難う御座います。

回答No.1

ORUKA1951

transformは関係ありません。
IMG要素は、置換インライン要素ですから、画像サイズに依存します。それをblock、ないしinline-blockにすれば、コンテナブロックのサイズを参照できます。
　⇒10.3 内容領域の幅と水平方向のマージンを計算する( http://www.swlab.it.okayama-u.ac.jp/man/rec-css2/visudet.html#Computing_widths_and_margins )

width:20%;height:aut;

＞ブラウザの伸縮に合わせてdivの中身（画像等）も一緒に伸縮したいのですが、
　フォントサイズはできません。できてもすべきではありません。折り返し位置が変わるだけです。
　画像など置換インライン要素については、ブロック要素にします。

お礼

ORUKA1951様

ご回答有難う御座います。

width:20%;height:auto;　は試してみたのですが、
どうしてもブラウザを伸縮させたときに、divの背景の位置と画像の位置が合わなくなるのです。
それでtransformを使用して何とかならないか探していたのです。