1

私の質問が、このサイトに投稿された他の質問とまったく同じであるとは思えません。そのため、1 つでも見逃していた場合は、この優れたコミュニティに事前に謝罪してください。

私の質問はこれです：

100% にするために nav コンテナーの下にヒーロー コンテナーをセットアップしましたが、ブラウザーのサイズを縮小すると (ヒーロー コンテナーの背景にある) 画像が縮小され、完全な寸法を占有しません。コンテナの。スケールが増減しているために画像がずれてもかまいません。前景のコンテンツが背景なしで残されるほど小さくなりたくないだけです。

何が起こっているかを正確に示すスクリーン キャストを次に示します: http://youtu.be/lLT3VzHOlPU

ここに codepen があります: http://codepen.io/MARS/pen/fEuKr

時間を割いて手伝ってくれた人に感謝します。

4

1 に答える 1

1

ビデオは、問題を説明するための良いアイデアです。:) この CSS は<div>with クラスで使用できますhero-container。背景画像は常に空間全体を埋めますが、決して歪むことはありません:

-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;

CSS3 Background-image オプションをサポートしているブラウザーはこちらを参照してください。

デモ

購入前にお試しください

于 2013-09-08T18:13:49.663 に答える