- 締切済み
背景画像の動的拡縮
要素の背景に指定した画像の拡縮について質問させてください。 div { background-image: url("ohana.png"); } の様にする事でdiv要素の背景画像を指定できますが、 div要素のサイズが不定(内容やクライアントの設定によって変動)である場合、 画像が途中で切れたり繰り返し表示されたりせずに、 要素に合わせて適切なサイズに拡縮して表示させたいと考えています。 これを実現する場合、どのように指定すればよろしいでしょうか？ IEのみの独自仕様を利用した実装は回避し、 IE6～とFF3.6～で実現できればと考えています。 宜しくお願い致します。
- mamadorusu
- お礼率31% (5/16)
- CSS
- 回答数4
- ありがとう数0
- みんなの回答 （4）
- 専門家の回答
みんなの回答
- k0021
- ベストアンサー率26% (32/120)
困っているわいには、回答に対して問い合わせないですね。 No3さんの回答であっていると思いますが。 私なら以下のようにしますが <body> <div style="position:absolute;top:0;left:0;width:100%;"> <img src="r014p.jpg" style="width:100%;" alt=""></div> <div style="position:absolute;top:0em;left:0;width:100%;"><div style="padding-left:2em;padding-right:1em;"> 以下通常の記述内容。 </div></div> padding-left:2em;padding-right:1emは、bodyで空白を指定しても反映しないための対策。
- 参考URL：
- http://ryuso.info/r/r001.htm
- ORUKA1951
- ベストアンサー率45% (5062/11036)
この課題、具体的内容がわからないとピンポイントの回答は出来ないのです。 特に ★div要素のサイズが不定(内容やクライアントの設定によって変動)である場合、 ですが、もし内容の縦横比が変わったらどうするのかがわかりません。示されたohana.pngが、私の想像通り鼻の写真なら、アスペクト比が変わったら困ります。そのような場合、 ・はみ出した内容をスクロールバーで表示させる CSS3のoverflow-yプロパティを使うのでIE6非対応 よって、「要素に合わせて適切なサイズ」は、矛盾した希望であると思います。 まあ、現状シェア３%以下のIE6は、もう切れ捨てても良いのじゃないかと・・ Internet Explorer 6 Countdown | Death to IE 6 | IE6 Countdown ( http://www.ie6countdown.com/ )・・・Microsoft自身が、IE6のシェアを1%以下にするために開設した特設サイト!!(Microsoft(豪)自身が「腐った牛乳( http://www.itmedia.co.jp/news/articles/1005/17/news033.html )と表現している。 それに協力する意味もこめて・・ 文字が、要素をはみ出さない限りIE6以降に対応した、ウィンドウ巾に合わせて画像を伸縮させるHTMLの見本です。(さらに、IE5も、センター寄席にこだわらなければ問題ない) [HTML4.01strict+CSS2.1] ★Another HTML-lint gateway ( http://openlab.ring.gr.jp/k16/htmllint/htmllint.html ) ★W3C CSS 検証サービス ( http://jigsaw.w3.org/css-validator/#validate_by_input ) で検証済み ※タブは、＿に置換してあります。 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> <html lang="ja"> <head> ＿<meta http-equiv="content-type" content="text/html; charset=Shift_JIS"> ＿<title>サンプル</title> ＿<meta name="author" content="ORUKA1951"> ＿<meta http-equiv="Content-Style-Type" content="text/css"> ＿<link rev="made" href="mailto:oruka1951@hoge.com" title="send a mail" > ＿<link rel="START" href="../index.html"> ＿<style type="text/css"> <!-- div.header div.nav{ ＿width:45%;margin:0 auto; ＿min-width:400px;max-width:600px; ＿position:relative; ＿padding:0; } div.header div.nav p.backImage{ ＿margin:0;padding:0; ＿position:relative; ＿top:0;left:0; ＿width:100%; } div.header div.nav p img{ ＿display:block; ＿width:100%;height:auto; } div.header div.nav ol{ ＿position:absolute; ＿top:0;left:0; ＿width:90%; ＿height:90%; ＿overflow:auto; } --> ＿</style> </head> <body> ＿<div class="header"> ＿＿<h1>サンプル</h1> ＿＿<div class="nav"> ＿＿＿<p class="backImage"><img src="./images/ohana.png" width="480" height="360" alt=""></p> ＿＿＿<ol> ＿＿＿＿<li><a href="./">Top</a></li> ＿＿＿＿<li><a href="./Product">Product</a></li> ＿＿＿＿<li><a href="./Books">Books</a></li> ＿＿＿＿<li><a href="./Contact">Contact</a></li> ＿＿＿＿<li><a href="./">Top</a></li> ＿＿＿＿<li><a href="./Product">Product</a></li> ＿＿＿＿<li><a href="./Books">Books</a></li> ＿＿＿＿<li><a href="./Contact">Contact</a></li> ＿＿＿＿<li><a href="./">Top</a></li> ＿＿＿＿<li><a href="./Product">Product</a></li> ＿＿＿＿<li><a href="./Books">Books</a></li> ＿＿＿＿<li><a href="./Contact">Contact</a></li> ＿＿＿＿<li><a href="./">Top</a></li> ＿＿＿＿<li><a href="./Product">Product</a></li> ＿＿＿＿<li><a href="./Books">Books</a></li> ＿＿＿＿<li><a href="./Contact">Contact</a></li> ＿＿＿＿<li><a href="./">Top</a></li> ＿＿＿＿<li><a href="./Product">Product</a></li> ＿＿＿＿<li><a href="./Books">Books</a></li> ＿＿＿＿<li><a href="./Contact">Contact</a></li> ＿＿＿</ol> ＿＿</div> ＿</div> </body> </html>
- JaneDue
- ベストアンサー率75% (263/350)
CSS3 なら簡単ですが、ご指定のブラウザだとCSSだけでは無理。 実現するにはJavaScriptが必要です。画像の上にレイヤーを重ねる要領でコンテンツを配置し、ページ読み込み時およびリサイズ時に画像サイズを変更することで可能ではありますが…。
- ORUKA1951
- ベストアンサー率45% (5062/11036)
背景は、あくまで背景で内容とは関係ないものですから、それの拡大縮小はできません。 それが必要だと言うことは、画像としてマークアップすべきですし、あるいはそれで不都合になる画像を背景に使用すべきではありません。印刷すると当然印刷されません。 画像を表示し、その上に文字なりを描画することになります。 <div class="nav"> <p><img src="./" width="" height="" alt=""></p> <ol> <li><a href=""></a></li> ・・・・・ と言う風に・・ 画像(置換インライン要素)を、ブロックにして、サイズを外部から取得させることになります。 div.nav{width:80%;min-width:480px;max-width:600px;margin:0 auto;position:relative;} div.nav p img{display:block;position:absolute;margin:0;padding:0;top:0;left:0;width:100%;height:100%;} ・・・とか・ その場合も、親コンテナブロックの縦サイズは、ユーザー依存ですから合わせることはできません。もちろん、サイズを固定してしまうと所期の目的である、「ウィンドウ巾に依存しない」を失うことになります。
