締切済み

背景画像の動的拡縮

2011/10/13 09:43

要素の背景に指定した画像の拡縮について質問させてください。 div { background-image: url("ohana.png"); } の様にする事でdiv要素の背景画像を指定できますが、 div要素のサイズが不定(内容やクライアントの設定によって変動)である場合、画像が途中で切れたり繰り返し表示されたりせずに、要素に合わせて適切なサイズに拡縮して表示させたいと考えています。これを実現する場合、どのように指定すればよろしいでしょうか？ IEのみの独自仕様を利用した実装は回避し、 IE6～とFF3.6～で実現できればと考えています。宜しくお願い致します。

mamadorusu
お礼率31% (5/16)

CSS
回答数4
ありがとう数0

みんなの回答 （4）
専門家の回答

みんなの回答

k0021
ベストアンサー率26% (32/120)

2011/10/14 13:38 回答No.4

困っているわいには、回答に対して問い合わせないですね。 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)

2011/10/13 16:02 回答No.3

この課題、具体的内容がわからないとピンポイントの回答は出来ないのです。特に ★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">  ＿</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)

2011/10/13 14:21 回答No.2

CSS3 なら簡単ですが、ご指定のブラウザだとCSSだけでは無理。実現するにはJavaScriptが必要です。画像の上にレイヤーを重ねる要領でコンテンツを配置し、ページ読み込み時およびリサイズ時に画像サイズを変更することで可能ではありますが…。

ログインすると、全ての回答が全文表示されます。

ORUKA1951
ベストアンサー率45% (5062/11036)

2011/10/13 12:26 回答No.1

背景は、あくまで背景で内容とは関係ないものですから、それの拡大縮小はできません。それが必要だと言うことは、画像としてマークアップすべきですし、あるいはそれで不都合になる画像を背景に使用すべきではありません。印刷すると当然印刷されません。　画像を表示し、その上に文字なりを描画することになります。 <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%;} ・・・とか・　その場合も、親コンテナブロックの縦サイズは、ユーザー依存ですから合わせることはできません。もちろん、サイズを固定してしまうと所期の目的である、「ウィンドウ巾に依存しない」を失うことになります。

ログインすると、全ての回答が全文表示されます。