No.2ベストアンサー
- 回答日時:
>どうしてもブラウザを伸縮させたときに、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 … )
難しく考えすぎでは?
ORUKA1951様
ご回答有難う御座います。
上記の様に試してみたところ、
実現できました。
ORUKA1951さんの言う通り、何か難しく考えすぎたようです。
大変助かりました。有難う御座います。
No.1
- 回答日時:
transformは関係ありません。
IMG要素は、置換インライン要素ですから、画像サイズに依存します。それをblock、ないしinline-blockにすれば、コンテナブロックのサイズを参照できます。
⇒10.3 内容領域の幅と水平方向のマージンを計算する( http://www.swlab.it.okayama-u.ac.jp/man/rec-css2 … )
width:20%;height:aut;
>ブラウザの伸縮に合わせてdivの中身(画像等)も一緒に伸縮したいのですが、
フォントサイズはできません。できてもすべきではありません。折り返し位置が変わるだけです。
画像など置換インライン要素については、ブロック要素にします。
ORUKA1951様
ご回答有難う御座います。
width:20%;height:auto; は試してみたのですが、
どうしてもブラウザを伸縮させたときに、divの背景の位置と画像の位置が合わなくなるのです。
それでtransformを使用して何とかならないか探していたのです。
お探しのQ&Aが見つからない時は、教えて!gooで質問しましょう!
似たような質問が見つかりました
- 一眼レフカメラ 【デジタル一眼レフカメラ用のスライドアーム、ブームアームのおすすめを教えてください三脚 3 2023/07/10 17:35
- 電気・ガス・水道 写真の水道を使用しているのですが伸縮自在のじゃばら付きの水道に変えたいなぁと思っています。 蛇口部分 2 2022/10/04 10:01
- 防災 (大地震の際の、家具転倒防止用)突っ張り棒と、プレートについて 2 2022/05/17 03:07
- HTML・CSS 分数が正常に表示されない。 6 2022/05/09 18:53
- その他(ヘルスケア・フィットネス) 猫背改善すると身長伸びますか? 自分測定したら175です。結構猫背です。なので縮んでる分猫背治すと身 4 2023/01/04 20:23
- リフォーム・リノベーション 6畳和室の中央が1cm下がっていて、(基礎のコンクリートから 敷居の底辺までの高さ→空洞部分 は、1 6 2022/06/07 01:19
- 洗濯・クリーニング・コインランドリー 縮んだパンツを元に戻したい 1 2022/12/07 20:20
- 医学 床に座っての前屈しているときに裏腿は『伸長性収縮』をしていると言えるのかどうか 2 2023/02/26 14:29
- モニター・ディスプレイ Windows10 ダブル液晶の解像度がおかしくなってしまいました 4 2023/04/07 09:05
- モニター・ディスプレイ WindowsノートPC 13.3で画面縮小したい 画面全体が見えない めり込んでしまってます 1 2023/01/22 13:42
関連するカテゴリからQ&Aを探す
おすすめ情報
デイリーランキングこのカテゴリの人気デイリーQ&Aランキング
-
position relativeの位置について
-
画像と背景色の幅が合わない
-
マウスをのせた時に画像の色を...
-
複数の画像を横にスクロールさ...
-
ボタンをセル内一杯に表示させ...
-
CSS実装されない
-
フォームのボタンをsubmitから...
-
画像を隙間なく配置する方法
-
複数の画像を連動してロールオ...
-
学校でポートフォリオサイトを...
-
リンクを知らせる手のマークが...
-
gif動画のサイズを変えてUPした...
-
floatさせたdtの内容が多い場合...
-
クリッカブルマップで画像と画...
-
html オンマウスで変化する画...
-
画像にリンクを張ると画像がず...
-
1から100までの自然数のうち、2...
-
htmlの文字が縦書きになる
-
ポップアップメニューを表のよ...
-
smallにtext-allignが効かない
マンスリーランキングこのカテゴリの人気マンスリーQ&Aランキング
-
ボタンをセル内一杯に表示させ...
-
リンクを知らせる手のマークが...
-
htmlで画像を2個ずつ並べていき...
-
ポップアップウィンドウのサイ...
-
画像のサイズが変わらない
-
【HTML/CSS】ボタンの枠が伸び...
-
画像の場合のみ、下線を消す方...
-
cssで、チェックボックスの画像...
-
HTMLのIMAGEに。。
-
XML画像データををHTMLで簡単に...
-
画像の横に文字をうまく配置で...
-
table で画像をピッタリとくっ...
-
画像をリンクさせると紫の枠が...
-
レスポンシブ対応のHTML・CSS(...
-
3つの画像を中央に寄せて表示さ...
-
UDP通信を使うチャットプログラ...
-
水面の波紋
-
cssヘッダー画像の下に配置した...
-
画像とテーブルの隙間をなくす。
-
HTMLは、シングルクォートかダ...
おすすめ情報