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

Question

我正在制作纸牌游戏。我有一张卡片精灵图片。 在精灵中说，每张卡的宽度为50px，高度为80px。 现在我有一些div，我想放置这些卡片。

假设Div的宽度为100px，高度为160px。

我使用第一张图像作为Div的Sprite，如下所示。

background：url（../ images / poker_sprite.gif）no-repeat scroll 0 0 transparent;

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

我使用什么CSS属性来使背景图像适合Div？我不允许更改Sprite或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%; }

您可以阅读有关偏移背景的百分比at MDN。

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

Answer 2

嗨，这是做你所追求的最简单方法！

CSS -

.smking,.king{
position: relative;
background-image: url(http://i.stack.imgur.com/WZ9Od.gif);
background-size: 1300% 500%;
}

.king{
width: 50px;
height: 80px;
background-position: 100px 0px;
}

.smking{
width: 30px;
height: 50px;
background-position:  60px 0px;
}

HTML -

<div class="king"></div>
<div class="smking"></div>

这将加载您的图像一次并准备好调整大小！

http://jsfiddle.net/j3xXe/10/

此致

Alphanu

Answer 3

另一个解决方案是创建一个SVG并将class属性分配给不同的路径组（每个路径组代表/呈现一张卡片）。如果所有路径组都有position: absolute和display: none，则只能显示与容器卡元素匹配的路径组，并使用纯矢量大小调整将其拉伸到完整宽度和高度。

这将产生大量的标记，所以这里最好的事情可能是每张卡上的SVG。

Chris Coyier关于使用SVG有excellent article。

实施例

<强> HTML + SVG

<div class="card card-hearts-ace">
    <svg id="cards-svg" ...>
        <g class="svg-card svg-card-hearts-ace">
            <path fill="#FF0000" d="..." />
            <path fill="#FF0000" d="..." />
        </g>
        <g class="svg-card svg-card-hearts-2">
            <path fill="#FF0000" d="..." />
            <path fill="#FF0000" d="..." />
        </g>
        ...
    </svg>
</div>

<强> CSS

.card .svg-card {
    display: none;
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}
.card-hearts-ace .svg-card-hearts-ace {
    display: block;
}
.card-hearts-2 .svg-card-hearts-2 {
    display: block;
}
/* And so on... */

Answer 4

对于常规图片max-width: 100%和Max-height: 100%应强制图片调整为div。

对于背景图片background-size: 100%应该有效。

Answer 5

我建议有2个精灵，主要是因为你的示例精灵中的分辨率较小，所以在示例div中看起来很好。

Answer 6

这将完成我认为您正在寻找的内容，并且应该支持所有浏览器。

假设你想要一个特定位置的国王你要做的就是将这两个类放在你的CSS中。

.king{
    width: 50px;
    height: 80px;
    position: relative;
    background-position: 50px 0px;
    background-image: url(http://i.stack.imgur.com/WZ9Od.gif);
}
.play-area{
    width: 50px;
    height: 80px;
    position: absolute;
}

现在为你需要的HTML

<div class="play-area">
    <div class="king"></div>
</div>

您需要做的只是玩弄数字，这样显示的卡片的边框就会正确。

这是小提琴：http://jsfiddle.net/j3xXe/4/

Answer 7

亚历山大·沃林的答案很棒！但我相信计算百分比偏移的公式中存在一个小错误;其中100除以x，它应除以（x-1）：

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

PS：很抱歉将此评论作为答案。我没有做出评论的必要信用。