我正在创建一个纸牌游戏。我有一张卡片的精灵图像。假设在 sprite 中，每张卡片宽 50 像素，高 80 像素。
现在我有一些 div 我想在其中放置这些卡片。
假设 Div 是 100px 宽和 160px 高。
我将第一张图片用作 Div 的 Sprite，如下所示。
背景：url(../images/poker_sprite.gif) 无重复滚动 0 0 透明；
我改变 x 和 y 位置，以便不同的 div 获得差异卡。
我使用什么 CSS 属性来使背景图像适合 Div ？我不允许更改 Sprites 或 Div 的大小。
现在我要拖动这些卡片并将它们放入下面标记为 1-13 的一些插槽中。
所以卡片 div 将具有可变的宽度。背景图像需要调整大小以适应可变宽度 div 。我该怎么做呢？我应该使用多个不同大小的精灵吗？
谢谢 ！
您可以使用该属性来实现这一点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/。
嗨，这是做你所追求的最简单的方法！
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>
这将加载您的图像一次并将其设置为可以调整大小！
问候
阿尔法努
另一种解决方案是创建一个 SVG 并将class属性分配给不同的路径组（每个代表/渲染一张卡片）。如果所有路径组都有position: absolute和display: none，您可以仅显示与容器卡片元素匹配的路径组，并使用纯矢量调整大小将其拉伸到全宽和全高。
这将产生大量的标记，所以这里最好的可能是每张卡上的 SVG。
Chris Coyier 有一篇关于使用 SVG的优秀文章。
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... */
对于常规图像max-width: 100%，Max-height: 100%应强制图像调整为 div。
对于背景图像background-size: 100%应该可以工作。
我建议有 2 个精灵，主要是因为您的示例精灵中的分辨率较小，然后在示例 div 中看起来不错。
这将做我相信你正在寻找的东西，并且应该支持所有浏览器。
假设您想要一个特定位置的国王，您要做的就是将这两个类放在您的 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/
亚历山大·沃林的回答很棒！但我认为计算百分比偏移的公式存在小错误；其中 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：很抱歉发表此评论作为答案。我没有发表评论的必要学分。