Html 调整背景精灵图像的大小以适合 div
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/18500801/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Resizing background sprite image to fit div
提问by geeky_monster
I am creating a card game . I have a sprite image of cards .
Say in the sprite , each of the cards is 50px wide and 80px high .
Now I have some divs where I want to place these cards .
我正在创建一个纸牌游戏。我有卡片的精灵图像。在精灵中说，每张卡片宽 50 像素，高 80 像素。
现在我有一些 div 想要放置这些卡片。
Say the Divs are 100px wide and 160px high .
假设 Div 宽 100 像素，高 160 像素。
I have using the first image as a Sprite for the Divs like in the below.
我使用第一个图像作为 Div 的 Sprite，如下所示。
background: url(../images/poker_sprite.gif) no-repeat scroll 0 0 transparent ;
背景： url(../images/poker_sprite.gif) 无重复滚动 0 0 透明；
I vary the x and y positions so that different divs get diff cards .
我改变了 x 和 y 位置，以便不同的 div 获得 diff 卡。
What CSS property do I use to make the background image fit to the Div ?I am not allowed to change the size of the Sprites or the Div .
我使用什么 CSS 属性使背景图像适合 Div ？我不允许更改 Sprites 或 Div 的大小。
Now I am going to Drag these cards and place them into some slots as marked 1-13 below .
现在我要拖动这些卡片并将它们放入下面标记为 1-13 的一些插槽中。
So the card div will have variable width . The background image will need to resize to fit in the variable width div . How do I go about doing this ? Should I used multiple sprites of various sizes?
所以卡片 div 将具有可变宽度。背景图像需要调整大小以适应可变宽度 div 。我该怎么做？我应该使用多个不同大小的精灵吗？
Thanks !
谢谢 ！
回答by Alexander Wallin
You can achieve this using the background-sizeproperty, although the results might not be too pretty, since it stretches the background image.
您可以使用该background-size属性来实现这一点，尽管结果可能不太漂亮，因为它会拉伸背景图像。
So, if you know that your sprite is 13x5 cards exactly in size, you can give the cards background-size: 1300% 500%and then size them any way you want, since the background itself will scale accordingly.
所以，如果你知道你的精灵是 13x5 大小的卡片，你可以给卡片background-size: 1300% 500%，然后按照你想要的任何方式调整它们的大小，因为背景本身会相应地缩放。
Example
例子
JSFiddle: http://jsfiddle.net/uLnzc/.
JSFiddle：http: //jsfiddle.net/uLnzc/。
HTML
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
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%; }
You can read about offsetting backgrounds in percentages at MDN.
您可以在 MDN 上阅读以百分比表示的偏移背景。
JSFiddle: http://jsfiddle.net/uLnzc/.
JSFiddle：http: //jsfiddle.net/uLnzc/。
回答by Alphanumu
Hi this is the easiest way of doing what you are after!
嗨，这是做你所追求的最简单的方法！
CSS -
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 -
HTML -
<div class="king"></div>
<div class="smking"></div>
This will load your image once and set it up ready to be resized!
这将加载您的图像一次并将其设置为准备调整大小！
Regards
问候
Alphanu
阿尔法努
回答by Alexander Wallin
Another solution is to create an SVG and assign classattributes to the different path groups (each representing/rendering a card). If all path groups have position: absoluteand display: none, you could show only the path group matching the container card element and stretch it to full width and height with pure vector resizing.
另一种解决方案是创建一个 SVG 并将class属性分配给不同的路径组（每个代表/渲染一张卡片）。如果所有路径组都具有position: absolute和display: none，则可以仅显示与容器卡元素匹配的路径组，并使用纯矢量调整大小将其拉伸至全宽和全高。
This will generate huge amounts of markup, so the best thing here would probably be on SVG per card.
这将产生大量的标记，所以这里最好的事情可能是每张卡片上的 SVG。
Chris Coyier has an excellent articleabout using SVGs.
Chris Coyier 有一篇关于使用 SVG的优秀文章。
Example
例子
HTML+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
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... */
回答by ZeroPhase
This will do what I believe you are looking for and should be supported for all browsers.
这将做我相信你正在寻找的东西，并且应该被所有浏览器支持。
Say you want a king in a specific slot what you would do is place these two classes in your css.
假设您想要在特定插槽中放置一个国王，您要做的就是将这两个类放在您的 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;
}
Now for the html you just need
现在对于您只需要的 html
<div class="play-area">
<div class="king"></div>
</div>
All you need to do is play around with the numbers so the borders of the cards displayed come out correct.
您需要做的就是玩弄数字，以便显示的卡片的边框正确无误。
Here's the fiddle: http://jsfiddle.net/j3xXe/4/
这是小提琴：http: //jsfiddle.net/j3xXe/4/
回答by ZeroPhase
For a regular image max-width: 100%and Max-height: 100%should force the image to resize to the div.
对于常规图像max-width: 100%，Max-height: 100%应该强制图像调整为 div。
For a background-image background-size: 100%should work.
对于背景图像background-size: 100%应该有效。
回答by innerurge1
I would suggest having 2 sprites, mainly because you have a smaller resolution in your example sprite then would look good in the example div.
我建议有 2 个精灵，主要是因为您在示例精灵中的分辨率较小，然后在示例 div 中看起来不错。
回答by Leif John
Alexander Wallin's answer is great! But I believe there is a small error in the formula for computing the percentage offset; where 100 is divided by x, it should be divided by (x-1):
亚历山大·沃林的回答很棒！但我相信计算百分比偏移的公式有一个小错误；其中 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: Sorry for making this comment as an answer. I do not have the necessary credits for making comments.
PS：很抱歉将此评论作为答案。我没有发表评论所需的学分。
