小さなdivに大きな画像スプライトを配置し、ウィンドウサイズに合わせて調整する

Question

.icon-parkfinder_1 { 
    background-image: url(../images/sprites.png); 
    background-position: -1080px 0px; 
    width: 1080px; 
    height: 1920px; 
} 

私は大きな画像スプライトを持っています。小さなdivに配置しました。私はそれが反応すると期待しています。しかしそれはうまくいかなかった。画像にフィットしてウィンドウのサイズ変更に合わせるための 'div'のスタイリング

Answer 1

次のコードは、ページのサイズに合わせて反応する画像を提供します。

.icon-parkfinder_1 { 
    background-image: url(../images/sprites.png); 
    max-width: 1080px; 
    width: 100%; 
    height: 1920px; 
    background-repeat: no-repeat; 
    background-size: 100%; 
} 

Answer 2

あなたの部門にバックグラウンドサイズ：カバーを追加できます。

.icon-parkfinder_1 { 
    background-image: url(../images/sprites.png); 
    width: 1080px; 
    height: 1920px; 

    background-size: cover; 
    background-position: center; 
}