Css Sprite 圖片等比縮放圖片大小（background-size優(yōu)化Sprites圖顯示）

yanbingyun1990 發(fā)布于2019-08-28 18:30 / 1115人閱讀

摘要：如圖所示但是，給我的背景圖片是這樣的一張圖，在我們的實(shí)例中我們使用底部菜單大小為了保證普通顯屏設(shè)備的圖像顯示，在這個(gè)圖像的基礎(chǔ)上做了一半的縮小。我們只計(jì)算了背景圖像的寬度值，為了確保背景圖像縮放比例正常，我們將值設(shè)置為。

在一個(gè)項(xiàng)目的開發(fā)過程中用到了css Sprite，有這樣一個(gè)需求：目標(biāo)樣式大小是32px * 23px大小的圖片作為圖標(biāo)。如圖所示:

但是，給我的背景圖片是這樣的一張圖，256px * 46px：

在我們的實(shí)例中,我們使用底部菜單大小32px * 23px.為了保證普通顯屏設(shè)備的圖像顯示，在這個(gè)圖像的基礎(chǔ)上做了一半的縮小。

在最初的CSS樣式中，background-position的屬性值都不需要進(jìn)行任何設(shè)置，因?yàn)樗麄兊哪J(rèn)值都是“0”，如下所示：

.x-navbar [class^="x-icon-"] {
background-image: url(img/icon_navbar_new_year.png);
width: 32px;
height: 23px;
}

因此，最關(guān)鍵的問題是，我們怎么知道background-size屬性值要設(shè)置為多少？

這里有一個(gè)公式：
高分辨率圖像寬度 / 目標(biāo)圖像寬度 = X
原始Sprites圖像寬度 / x = background-size的寬度值

我們高分辨率下的圖標(biāo)是256px x 46px;
我們目標(biāo)圖像的寬度是“64px”；
我們Sprites圖像的總寬度是“256px”

根據(jù)前面的公式可以得知
64/32 = 2
256/2 = 128
最后的一件事情。我們只計(jì)算了背景圖像的寬度值，為了確保背景圖像縮放比例正常，我們將“height”值設(shè)置為“auto”。當(dāng)然你也可以設(shè)置相的的值（設(shè)置background-sizer的寬度為auto，高度為具體值），但我發(fā)現(xiàn)設(shè)置寬度會(huì)比較容易。

.x-navbar [class^="x-icon-"] {
    background-size: 128px auto;
}

然后就是根據(jù)圖片的位置坐標(biāo)進(jìn)行顯示了：

.x-icon-shouye {background-position: 0 0;}
.x-icon-dingdan {background-position: -32px 0;}
.x-icon-gouwuche {background-position: -64px 0;}
.x-icon-gengduo {background-position: -96px 0;}

這樣就實(shí)現(xiàn)了圖中的效果了！