web-dev-qa-db-ja.com

divに合わせて背景のスプライト画像のサイズを変更する

カードゲームを作っています。カードのスプライト画像があります。スプライトで言うと、各カードの幅は50ピクセル、高さは80ピクセルです。 enter image description here 今、私はこれらのカードを置きたいいくつかのdivを持っています。 enter image description here

Divの幅が100ピクセル、高さが160ピクセルだとします。

以下のように、最初の画像をDivのスプライトとして使用しています。

背景：url（../ images/poker_Sprite.gif）繰り返しなしスクロール00透明;

異なるdivがdiffカードを取得するように、xとyの位置を変更します。

背景画像をDivに合わせるためにどのCSSプロパティを使用しますか？スプライトまたはDivのサイズを変更することは許可されていません。

次に、これらのカードをドラッグして、下の1〜13のマークが付いているいくつかのスロットに配置します。 enter image description here

したがって、カードdivの幅は可変になります。背景画像は、可変幅divに収まるようにサイズを変更する必要があります。これを行うにはどうすればよいですか？さまざまなサイズの複数のスプライトを使用する必要がありますか？

ありがとう！

javascripthtmlcssbackground-image
14
geeky_monster

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/ 。

20
Alexander Wallin

こんにちはこれはあなたが求めていることを行う最も簡単な方法です！

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>

これにより、画像が1回読み込まれ、サイズを変更できるように設定されます。

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

よろしく

アルファヌ

2
Alphanumu

別の解決策は、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... */
1
Alexander Wallin

これはあなたが探していると私が信じていることを行い、すべてのブラウザでサポートされるべきです。

特定のスロットにキングが必要だとすると、これら2つのクラスを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/

0
ZeroPhase

アレクサンダーウォリンの答えは素晴らしいです！しかし、パーセントオフセットを計算するための式には小さな誤差があると思います。 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
Leif John

通常の画像の場合max-width: 100%およびMax-height: 100%は、画像をdivにサイズ変更するように強制する必要があります。

背景画像の場合background-size: 100%は機能するはずです。

0
ZeroPhase

主に、例のスプライトの解像度が小さいため、例のdivで見栄えがするため、2つのスプライトを使用することをお勧めします。

0
innerurge1