background-sizeの使い方：反応する高さの要素を含む

Question

私はbackground-sizeを使用しています：divに含まれていますが、画像は反応しますがdiv要素の高さは固定されています。 divの高さをイメージと同じように返す良い解決策は何ですか？私はdivとそれより低い兄弟要素の間に空白ができません。あなたの目標は幅が減少することを余儀なくされている場合、画像は白なしに比例して拡大縮小するように、高さも同様に減少するように（div要素は、その縦横比を維持する持っていると仮定すると

.projectBlurbHero { 
 
     background-image: url('http://artofabsence.com/wp-content/uploads/2012/09/camel-ride1.jpg'); 
 
     background-size: contain; 
 
     background-position: top center; 
 
     background-repeat: no-repeat; 
 
     height: 460px; 
 
     max-height: 460px; 
 
    }

<div> 
 
     <div class="projectBlurbHero"></div> 
 
     <div class="projectBlurbTitle"> 
 
      <h2>Title</h2> 
 
     </div> 
 
    </div>

Answer 1

スペース）、あなたはおそらくdivの高さを得るために計算をしなければならないでしょう。そのためには、JavaScriptやcssのcalc機能を使用することができます（後者は普遍的にサポートされていませんが、Opera Miniはそれを受け入れません）。また、メディアクエリを使用してブレークポイントを設定し、空白があまりにも大きくならないようにすることもできますが、それが最良の選択肢になるケースはほとんどありません。

1つの例外：ブラウザウィンドウの幅に直接比例する幅の場合は、Opera Miniでは対応していませんが、vwユニットを使用できます。

応答がある場合は、それが応答しているかどうかに応じて、より簡単なアプローチが可能かもしれません。