バックグラウンドイメージの応答性と適合性に関する問題

Question

ヘッダーの背景イメージが正しく見えるようになっています。

は今、それが設定されている：

.hero { 
    background: url(http://wordstream-prod.s3.amazonaws.com/landing_pages/assets/img/e682443e-b4c0-483f-823e-8170fd4b71b2) no-repeat center center; 
    background-size: cover; 
    background-position: center; 
} 

アイブ氏はそれを動作させるために、CSSの多くのバリエーションを試みたが、それを把握するカント。私は、セクションが完全なイメージを表示し、ブラウザが縮小するにつれてそれを表示し続ける（カットしないでください）ようにしたいと思います。現時点では、画像が縮小するまで画像の上下をカットしてから、全体を表示します。私がさらに縮むと、両脇が切り取られます。

私はbgサイズを含むように切り替えたとき、小さなデバイス上に画像の周りにたくさんのスペースが残っていました。どんな助けもありがとうございます。

リンク：http://solatube.solabrite.com/premier-dealer

Answer 1

が.heroのアスペクト比は、画像のものと一致する必要がある、ということができません。これは、画像のアスペクト比を表すパーセンテージ量で要素にパディングを適用することによって実行できます。画像の高さを幅（500/1280 = 39.0625％）で割って、そのパーセンテージを得ることができます。

.hero { 
    height: 0; 
    padding-top: 39.0625%; 
} 

Answer 2

このCSSを追加し、あなたがbackground-size: coverを使用している場合、それは全体の利用可能なスペースをカバーするまで、その後、画像が縮小されます。

たぶんbackground-size: containでそれを試し、それが利用可能なスペースのXまたはY次元のいずれかを覆うまで、画像は縮小されます。

BUT：あなたの画像がカバーしようとしている領域と同じアスペクト比を持っている場合は、どちらも問題ありません。