0
がうまくいけば、タイトルはとにかく、私はCSSで本体に取り付けBGイメージを持っている、（私はあなたを保証するいくつかの思考を取った）かなり良い、それを説明する：サイズ関係CSS3
body,html {
height: 100%;
}
body {
background: url("../images/header_lg.jpg") no-repeat;
-moz-background-size: 100% auto;
-webkit-background-size: 100% auto;
-o-background-size: 100% auto;
background-size: 100% auto;
}
.fullwidth-head {
position: relative;
width: 100%;
height: 100%;
}
.fullwidth-head-inner {
position: absolute;
top: 17%;
left: 11%;
width: 78%;
height: 30%;
background: #c5c5c5; /* just for visibility */
}
2つのdivはコンテナで、相対的なもので、最初のdivのようにデフォルトでページの最上部に表示されます。fullwidth-headはもう1つの絶対配置されたdivです.full-width-head今はデスクトップ上ではかなりうまく動作しますが、私はそれをしたいと思っていますが、私がポートレートビューに切り替えると、実際にはサイズ変更されている背景イメージとの関係がないためにポットになります。同じサイズの空の.pngを追加して小さなハッキング体の背景画像は比率を維持するためには効果がありますが、余分な負荷がかかるため、これをやめるのが少し難しいです。
<body>
<div class="fullwidth-head">
<div class="fullwidth-head-inner">
</div><!-- /.fullwidth-head-inner -->
</div><!-- /.fullwidth-head -->
<!-- js scripts in footer -->
ので、使用するよりも、他の方法がある：
HTMLは、私はいつかのためにこれをされていると私は後にしています必要な結果を得るまでやり直す維持している（あまりありがたいことに）以下でありますblank.png相対コンテナdivのサイズを修正するには、実際にはCSSを使用して、私はボディのbgイメージと同じアスペクト比を保つ必要があるのですか？
おかげ
私はあなたが欲しいものを理解し、私はあなたが単に_padding下hack_を探しているかもしれないと思うん確認してください。 – CBroe
返信いただきありがとうございます.fullwidth-headのCSSは基本的に100％の高さです（デスクトップの場合は涼しいですが、画面の縦横比によって縦長表示になると100％のままです） fullwidth-header-inner divをあまりにも下に移動します。私はそれを見るように私は2つの選択肢があります：a）mediaクエリb）blank.pngを使用すると理想的ですが、css3またはjsにイメージのサイズを取得する可能性のあるものがあれば、どんな場合でもdivが正確に配置されるので、より良い選択肢があります。 – MartinJJ
あなたは画像の比率を知る必要があります。あらかじめアスペクト比。しかし、パッディングボトムハックは、実際の画像と同じように要素を「サイズ変更」する簡単な方法です。 – CBroe