html - 小さい解像度の背景画像

Question

幅x1600の大きな背景画像があります。1600x900の画面にぴったりです。ただし、1280x720に変更すると、右側の背景画像がトリミングされます。中央のスライドショーを右揃えにします。

スライドショーを中央に配置したまま、左右両側をトリミングするにはどうすればよいですか。

Answer 1

background-position: center center;

これにより、背景が中央に配置され、画面が十分に大きくない場合は、必要なすべての側面がトリミングされます。

ただし、1920x1200の画面ではエッジが空になることに注意してください。

Answer 2

使用する

background-position: center center;

画像を中央に配置します。

background-size: cover;

幅と高さの両方が領域内に収まるように、画像を最大サイズにスケーリングします。

background-size: contain;

すべてが見えるように背景画像を拡大縮小します。

background-size: 100% 100%;

画像を領域の幅と高さに引き伸ばします。

http://www.w3schools.com/cssref/css3_pr_background-size.asp

それが役立つことを願っています!

編集: 古いブラウザーとの互換性のために-moz-background-size、 、-webkit-background-size、およびで同じ値を指定します-o-background-size。background-size - MDNを参照してください。