调整背景精灵图像的大小以适合div

Question

我正在创建一个纸牌游戏.我有一张卡片精灵图片.在精灵中说,每张卡的宽度为50px,高度为80px. 现在我有一些div,我想放置这些卡片.

假设Div的宽度为100px,高度为160px.

我使用第一张图片作为Divs的Sprite,如下所示.

background:url(../ images/poker_sprite.gif)no-repeat scroll 0 0 transparent;

我改变了x和y位置,以便不同的div获得diff卡.

我使用什么CSS属性来使背景图像适合Div？我不允许改变Sprites或Div的大小.

现在我要拖动这些卡并将它们放入一些插槽中,如下面的标记1-13所示.

所以卡片div的宽度可变.背景图像需要调整大小以适应可变宽度div.我该怎么做呢？我应该使用多种不同尺寸的精灵吗？

谢谢 !

Answer 1

你可以使用background-size属性来实现这一点,虽然结果可能不太漂亮,因为它会拉伸背景图像.

因此,如果您知道您的精灵是13x5卡的大小,您可以给卡background-size: 1300% 500%,然后按照您想要的任意方式调整大小,因为背景本身会相应缩放.

例

JSFiddle:http://jsfiddle.net/uLnzc/.

HTML

<!-- Hearts --->
<div class="card card-hearts-2"></div>
<div class="card card-hearts-3 card-wide"></div>
<div class="card card-hearts-4 card-high"></div>

<!-- Clubs -->
<div class="card card-clubs-q"></div>
<div class="card card-clubs-k card-wide"></div>
<div class="card card-clubs-a card-high"></div>

CSS

.card {
    width: 81px;
    height: 117px;
    background: url('http://i.stack.imgur.com/WZ9Od.gif') no-repeat;
    background-size: 1300% 500%;
}
.card-wide {
    width: 100px;
}
.card-high {
    height: 130px;
}

/**
 * Backgrouns position of all the cards
 *
 * x offset in %: i * (100/x); i = 0, 1, ..., (x - 1); x = the number of cols in the sprite
 * y offset in %: j * (100/y); j = 0, 1, ..., (y - 1); y = the number of rows in the sprite
 */

.card-hearts-2 { background-position: 0 0; }
.card-hearts-3 { background-position: 8.33% 0; }
.card-hearts-4 { background-position: 16.667% 0; }
/* ... */

/* ... */
.card-clubs-q { background-position: 83.333% 50%; }
.card-clubs-k { background-position: 91.667% 50%; }
.card-clubs-a { background-position: 100% 50%; }

您可以在MDN上阅读有关抵消百分比背景的信息.

JSFiddle:http://jsfiddle.net/uLnzc/.