logo标签列表

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

javascripthtmlcssbackground-image
14
我正在创建一款纸牌游戏。我有一张纸牌的精灵图像，假设在精灵中，每个纸牌的宽度为50px，高度为80px。 图片描述 现在我有一些 div，我想将这些纸牌放在其中。 图片描述 假设这些 div 的宽度为100px，高度为160px。我使用第一张图像作为 div 的精灵，如下所示：
background: url(../images/poker_sprite.gif) no-repeat scroll 0 0 transparent ;
我会变化 x 和 y 位置，使不同的 div 得到不同的纸牌。 我该使用哪个 CSS 属性来使背景图像适应 div？我不允许改变精灵或 div 的大小。
现在，我要拖动这些纸牌，将它们放入标记为1-13的一些插槽中。 图片描述 因此，纸牌 div 将具有可变宽度。背景图像需要调整大小以适应可变宽度的 div。我该怎么做？我应该使用各种尺寸的多个精灵吗？
谢谢！
你是否正在尝试将上方大图中的特定图像适应到div中？ - ZeroPhase
7个回答
21
你可以使用 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/。

太好了！！我认为这就是我想要的。我不知道背景大小可以这样使用。让我试试这个。 - geeky_monster
请注意，“background-size”在IE8及以下版本中不受支持。 - Alexander Wallin
没问题。这个可以。我们现在的目标是 WebKit 浏览器。 - geeky_monster
如果我稍后使用JavaScript更改高度和宽度，该怎么办？我发现背景图像会更改为另一张卡片。 - geeky_monster
1
哇，太棒了。完全成功了。我从来不知道这是可能的。 - Gabriel Yarra
显示剩余3条评论
1

你好，这是最简单的完成你想要的方式！

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

在我看来，最重要的解决方案是背景大小缩放。它允许使用相对单位来设置元素的宽度/高度，例如vw/vh。 - srgg6701
你是如何确定特定的尺寸/百分比的？更详细的说明会提高答案的质量。 - Professor Abronsius
1

另一个解决方案是创建一个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... */
SVG与<defs>和<use>结合使用可以在最小的额外标记下完成出色的工作。这也可以实现更清晰的调整大小。 - Mark K Cowan
0
Alexander Wallin的回答很好！但我认为计算百分比偏移量的公式中有一个小错误；在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：抱歉我把这个评论写成了回答。我没有足够的积分来发表评论。

0

这将实现您想要的功能，并且应该支持所有浏览器。

比如，如果您想在特定的插槽中放置一个王，您需要在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>

你所需要做的就是调整数字，以便正确显示卡片的边框。

这是 jsfiddle 链接：http://jsfiddle.net/j3xXe/4/

0

对于普通图片，max-width: 100% 和 max-height: 100% 应该强制图片调整大小以适应 div。

对于背景图片，background-size: 100% 应该起作用。

这是一张背景图片。它不会随着最大宽度和最大高度属性进行调整大小。 - geeky_monster
如果您不打算为每个尺寸使用多个精灵，我认为background-size: 100%应该可以工作。 - ZeroPhase
1
如果我使用background-size: 100%，整个精灵图都会适应div的大小 - 不仅仅是一张卡片。 - geeky_monster
哦，我以为每张卡片都是单独的精灵。 - ZeroPhase
每个单元格都分成了单独的“div”吗？ - ZeroPhase
是的，每个单元格都在单独的div中。 - geeky_monster
0
我建议使用2个精灵，主要是因为您的示例精灵分辨率较小，如果放在示例div中会显得不太好看。
一种完整的处理方式是创建一个SVG并为不同的路径组（每个代表一张卡片）分配“class”属性。如果所有路径组都具有“position: absolute”和“display: none”，则只能显示与容器卡元素匹配的路径组，并使用纯矢量调整将其拉伸到全宽度和高度。 - Alexander Wallin
网页内容由stack overflow 提供, 点击上面的
可以查看英文原文，
原文链接