CSS3で背景を高さでどのようにスケールするのですか？

Question

私はcoverを使うことができ、または 'background-size'プロパティに値を含めることができますが、ウィンドウの高さで背景を拡大することは可能ですか？

私は両方が動作しませんでした

background-size: auto contain 

background-size: cover contain 

を試してみました。

Answer 1

containとcoverのキーワードは、それ自身で使用するためのものです。背景画像の幅や高さだけでは使用できません。つまり、2つを組み合わせることはできません。さらに、これらの2つの値は、常にのアスペクト比に従って画像のスケールを調整します。

あなたはそのボックス内（含まれる）は、可視画像全体を維持しながら、ちょうど単独でcontainを指定し、画像の縦横比を維持することを意味場合：

background-size: contain; 

だけ背景画像の元を維持することを意味場合画像のアスペクト比を維持せずに、その幅をピクセルで、100％で指定する必要があります。

だから幅200個のピクセルの背景画像のために、あなたが使用します：

background-size: 200px 100%; 

は、あなたのイメージに適切なbackground-positionとbackground-repeatを与えることを忘れないでください。