• ベストアンサー

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

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

  • HTML
  • 回答数2
  • ありがとう数2

質問者が選んだベストアンサー

  • ベストアンサー
  • ORUKA1951
  • ベストアンサー率45% (5062/11036)
回答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/visudet.html )  難しく考えすぎでは?

tenpraxxx
質問者

お礼

ORUKA1951様 ご回答有難う御座います。 上記の様に試してみたところ、 実現できました。 ORUKA1951さんの言う通り、何か難しく考えすぎたようです。 大変助かりました。有難う御座います。

その他の回答 (1)

  • ORUKA1951
  • ベストアンサー率45% (5062/11036)
回答No.1

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の中身(画像等)も一緒に伸縮したいのですが、  フォントサイズはできません。できてもすべきではありません。折り返し位置が変わるだけです。  画像など置換インライン要素については、ブロック要素にします。

tenpraxxx
質問者

お礼

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

関連するQ&A

  • ブラウザのサイズを変えたら、divのボックスの高さも合わせて

    ブラウザのサイズを変えたら、divのボックスの高さも合わせて 可変できるようにしたいです。 さらに、可変したdivのボックスの高さより内容量が多い場合は ブラウザのスクロールバーのようにCSSのoverflow:autoで スクロールが表示されるようにしたいと考えております。 現時点で、スクロールバーはオリジナルの画像で作成しており、 表示させるのにjScrollPane.jsというJavaScriptを使用しています。 しかし高さが固定されており、カスタマイズしようと思っているのですが なかなかうまくいきません。 どなたか、実現方法をご教授願えますでしょうか。 よろしくお願いいたします。 ※情報不足であれば、追記いたしますのでご指摘お願いいたします。

  • ブラウザの伸縮に合わせて縦スクロールも伸縮

    googleカレンダーの様に、ブラウザの伸縮に合わせて縦スクロールも伸縮させたいのですが、(https://www.google.com/calendar/render)HTMLとCSSだけでは限界があるようです。どなたか良い方法ご存じな方いらっしゃいませんでしょうか?ご教授頂けると幸いです。

    • ベストアンサー
    • HTML
  • ブラウザに合わせて伸縮する画像テーブル

    手打ちでHPを作成している者です。 ブラウザに合わせて伸縮するようにテーブルを作りたいと思っています。 普通のテーブルなら%で伸縮させられたのですが、8つの画像を使う角の丸いテーブル等、画像で作ったテーブルの伸縮がうまくいきません。 画像がテーブルの表示領域いっぱいに連なり、模様のようになってしまいます。 そしてその中にインラインフレームでコンテンツを表示させたいと思っています。 ブラウザに合わせてテーブルも、その中のインラインフレームも同じように可変させたいのですが、どうしたらよいのでしょうか? お詳しい方、ご回答よろしくお願い致します。

    • ベストアンサー
    • HTML
  • ブラウザのサイズによって伸縮させる方法

    下記のサイトのようにウィンドウの大きさに合わせて伸縮するサイトが作りたいのですが、コードの記述が分かりません。 http://www.cocoro-gift.com/ ブラウザのサイズによって背景画像が伸縮するやり方は載っていたのですが、今回作りたいのは右側にもムービークリップがあり、ウィンドウの大きさを変えてもステージの右端にくっついていくような作りです。 上記サイトのsakeのメニューを開いていくと、左下にボタン、右にお酒の画像が出てくるのですが、ウィンドウの大きさを変えてもそれぞれの位置は固定されたまま、ステージだけが伸縮する形です。 そのようなflashをつくるには、どんなコードにすればいいのでしょう? 分かる方どうかよろしくお願いいたします。

  • テーブルとdiv

    テーブルもdiv+CSSも本来ページのレイアウトに使うのは正しくないのはわかっていますが、divとテーブルは同じ数だけ使用し、どちらもどのブラウザから見ても見た目に差がないようにできたとしたら、テーブルの乱用とdivの乱用はどちらの方がマシなのでしょうか? ちなみにどちらもページ全体をテーブルとdivで囲ってしまいます。 お暇な時でいいのですので回答お願いいたします。

  • html divについて

    html divについて 現在、html・CSSを勉強中です。 htmlのDivの中で画像を貼っているのですが、左端の中央に設定したいのですが、うまく行きません。 左端中央に画像を表示できる方法を教えてください。よろしくお願い致します。 ↓ html ↓ <div class="area"> <div class="area_left"> <div class="01"> : </div> <div class="02"> : </div> <div> <div class="area_right"> <div class="03"> : </div> <div class="04"> <img src=" "> </div> </div> </div> ↓ CSS ↓ div.area_right .04{ vertical-align: middle; width: 197px; height: 159px; background-image: url("area_04.gif"); }

    • ベストアンサー
    • HTML
  • [Flash]ブラウザに合わせて伸縮するFlashの作成法

    [Flash]ブラウザに合わせて伸縮するFlashの作成法 お世話になります。 現在flashを使ったwebサイトを作っている者です。 FLASHは基礎を学んだだけの初心者で、テキストのアニメーションはなんとか作れるといったレベルです。 今回初めて実際にあるcafeのHPを作ることになりましたが、調べてもどうなっているかがわかりませんでしたので皆様のお力を借りたく書き込みしています。 topページを 以下のページのように、ナビゲーション部分はHTML+CSSで http://www.timeoutcafe.jp/ 1.ブラウザに合わせてFLASHが伸縮するように作成したい。 2.FLASH部分の画像の上に他ページにリンクさせるように設定したナビゲーションボタンを載せたい。 以上の2点を教えて頂けたらと思います。 よろしくお願いいたします。

  • CSSに詳しい方

    ブログで「マウスオーバーで画像を拡大」っていうのを取り入れたいのですが、上手くいきません。 画像は拡大されますが、外枠を固定できず困ってます。 http://webya-tm.com/archives/1703 こちらのページを参考に 「画像をマウスオーバーしたときに「拡大」する」がやりたいことです。 <html> ・・・ <div class="entry_body">  <p style="text-align: right;">公開日:2014/10/04</p>  <img src="http:~.jpg" alt="~" title="~" border="0" width="600" height="294" />  <本文> </div> ・・・ </html> htmlの構造的にはこういう感じになってて、 <img src="http:~.jpg" alt="~" title="~" border="0" width="600" height="294" /> の部分を <div class="img-block"> <img src="http:~.jpg" alt="~" title="~" border="0" width="600" height="294" /> </div> と書き換え、さらにCSSに .img-block { width: 600px; height: 300px; overflow: hidden; } と追記すれば上手くいきました。 ただ、すべての<img src~の部分を <div class="img-block"> <img src~ </div> と書き換えるのは、すごく大変な作業なので、その方法以外で 今のままのHTMLで、CSSを書き換えるだけで http://webya-tm.com/archives/1703 こちらのページの「画像をマウスオーバーしたときに「拡大」する」を やる方法はないでしょうか? ↓今のCSSです。 img { transition: 0.4s; } .entry_body {  width: 600x; overflow: hidden; } img:hover { -moz-transform: scale(1.2,1.2); -webkit-transform: scale(1.2,1.2); -o-transform: scale(1.2,1.2); -ms-transform: scale(1.2,1.2); } ※overflow: hidden;というのが働いてくれない状態です。

    • ベストアンサー
    • CSS
  • ブラウザの見え方の違いについて教えてください。

    CSSで只今苦戦苦闘しております。 前回、TABLEタグを使用してデザインを組んでいいのかどうかということを質問させていただきました。 ご回答していただき本当にありがとうございました。 今回も、わからなかったので質問させていただきました。CSSでwidthやmargin、そして前回教えていただいた通り TABLEを使わずDIVタグを使用して作っています。IEで確認しながら作っていたのですがブラウザの種類によっては デザインがぐちゃぐちゃになってしまう。と効いたのでファイアーフォックスとsafariというブラウザを インストールして両方で確認しましたところ、「ぐちゃぐちゃ」になっていました(涙) どのようになってしまったかといいますと、DIVタグで指定した大きさがIEとファイアーフォックスでは違う見え方をしてしまいます。 marginの大きさは変わらなかったのですが、widthの大きさが少し違ってしまったり画像を設定したのに表示されなかったりしてしまいます。(たぶんこれはwidthの幅が上手く設定できていないからだと思います。) 話が長くなってしまいましたが、聞きたいことは・・・。 1.ブラウザによっては読み込みの出来ないCSSプロパティというのがあるのでしょうか。(Javascriptはあるようですけど・・・。) 2.それと「これ通りにやれば、どのブラウザでも見え方が同じになる!」といった方法や、みなさんがどのようにブラウザの問題を克服(?)されたか教えてもらえませんか?あとできれば、克服のためのお勧めサイトでもありましたら教えていただけませんでしょうか。よろしくおねがいします。

  • IE6のブラウザで、<div>に設定した背景画像が固定されない事で悩ん

    IE6のブラウザで、<div>に設定した背景画像が固定されない事で悩んでいます。 <body>と<div>にそれぞれ背景を設定しているのですが、<div>に設定した背景だけが、 縦のスクロールバーと一緒にスクロールしてしまいます。 背景自体はCSSで下記のように設定しています。 background:url("./hoge.gif") no-repeat fixed center top; <body>も同じ設定で背景を表示させているのですが、こちらは問題なく固定表示になっています。 <div>などのボックス要素では固定表示させることは無理なのでしょうか? どうぞ知恵をお貸しください。