將大圖像精靈放在小div中，並根據窗口大小調整

Question

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

我有一個大的圖像精靈，我把它放在小格子中。我希望它能夠做出反應。但它不起作用。應該爲'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

您可以爲您的div添加背景大小：封面。

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

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