3

新しい CSS3 の背景コマンドのいくつかに少し行き詰まっています。

画面/ブラウザ サイズに動的にスケーリングする背景画像を持つ を作成しようとしています。

これは私が実現したい効果の例です。これは < body > タグで実行されています http://www.css3.info/demos/background-size-contain.html

私が抱えている問題は、 < body > タグには高さや幅を定義する必要がないことですが、 < div > には必要です。ここに私のコードがあります:

<!DOCTYPE html> 
<html> 
<head> 
<title>background-size: contain;</title> 
<style type="text/css"> 

#please_expand {
background-image: url(images/betweengrassandsky.png);
background-repeat: no-repeat;
background-attachment: fixed;
background-color: #EEE;
background-size: contain;
}
</style>

<body>
<div id="please_expand">
    <h1>Example J - background-size: contain;</h1>
</div>
</body> 
</html>
4

1 に答える 1

6

ブロック要素 ( などdiv) では、高さは幅と同じようには機能しません。高さを指定しない場合、要素はコンテンツと同じ高さになります。それは一つのことです。

height: 100%div をそのまま大きくしたい場合は、この方法が適していますbodyが、秘訣は、パーセンテージの高さが常に親の高さから得られることです。したがって、クロスブラウザーの結果を得るにheight: 100%は、すべての親 ( を含む) を設定する必要があります。html

html,body,#please_expand { height: 100%; }

jsFiddle デモ

于 2012-05-15T09:41:02.357 に答える