Redimensionnement de l'image d'image-objet en arrière-plan pour s'adapter à div

Je suis entrain de créer un jeu de cartes . J'ai une image sprite de cartes .
Dire dans le sprite , chacune des cartes est 50px de large et 80px élevé .
Redimensionnement de l'image d'image-objet en arrière-plan pour s'adapter à div
Maintenant j'ai quelques divs où je veux placer ces cartes .

Dire les Divs sont 100px de large et 160px de haut .

J'ai l'aide de la première image comme un Sprite pour les Divs comme dans le ci-dessous.

background: url(../images/poker_sprite.gif) no-repeat scroll 0 0 transparent ;

Je varie les positions x et y de sorte que les différents divs obtenir diff cartes .

Quelle propriété CSS dois-je utiliser pour faire de l'image de fond d'ajustement à la Div ? Je ne suis pas autorisé à modifier la taille des Sprites ou de la Div .

Maintenant je vais les faire Glisser l'une de ces cartes et de les placer dans des fentes comme marqué 1-13 ci-dessous .
Redimensionnement de l'image d'image-objet en arrière-plan pour s'adapter à div

Donc la carte div auront une largeur variable . L'image de fond devrez redimensionner pour s'adapter à la largeur variable div . Comment dois-je faire ? Dois-je utilisé plusieurs sprites de différentes tailles?

Merci !

source d'informationauteur geeky_monster

Vous pouvez atteindre cet objectif en utilisant la background-size de propriété, bien que les résultats ne soient pas très joli, car il s'étend de l'image d'arrière-plan.

Donc, si vous savez que votre sprite est 13x5 cartes exactement à la taille, vous pouvez donner les cartes background-size: 1300% 500% et puis la taille de la façon que vous voulez, depuis le fond lui-même à l'échelle en conséquence.

Exemple

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%; }

Vous pouvez lire au sujet de la compensation des milieux dans les pourcentages au MDN.

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

Salut, ce est la façon la plus simple de faire ce que vous êtes après!

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>

Cela vous permettra de charger votre image une fois et le mettre en place, prêt à être redimensionnées!

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

Ce qui concerne

Alphanu

Une autre solution est de créer une SVG et attribuer class attributs pour le chemin d'accès différent groupes (chacun représentant/rendu une carte). Si tout chemin de groupes ont position: absolute et display: nonevous pouvez afficher uniquement le chemin d'accès correspondant de groupe le conteneur élément de la carte et de l'étirer à la largeur et de la hauteur avec pure vecteur de redimensionnement.

Cela va générer d'énormes quantités de balisagede sorte que la meilleure chose serait probablement sur SVG par carte.

Chris Coyier a un excellent article sur l'utilisation de SVGs.

Exemple

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... */

0

Je vous suggérerais d'avoir 2 sprites, principalement parce que vous avez une plus petite résolution dans votre exemple de sprite alors regardez bien, dans l'exemple de div.
0

Pour une image régulière max-width: 100% et Max-height: 100% devraient force de l'image pour la redimensionner à la div.

Pour un background-image background-size: 100% devrait fonctionner.
0

Cela va faire ce que je crois que vous recherchez et doit être pris en charge par tous les navigateurs.

Dites que vous voulez un roi dans un emplacement spécifique ce que vous voulez faire est de placer ces deux classes dans votre 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;
}
```
Maintenant, pour le html, vous avez juste besoin
```
<div class="play-area">
    <div class="king"></div>
</div>
```
Tout ce que vous devez faire est de jouer avec les chiffres de sorte que les contours des cartes affichées sortir correct.

Voici le violon: http://jsfiddle.net/j3xXe/4/
0

Alexander Wallin la réponse est génial! Mais je crois qu'il y a une petite erreur dans la formule pour le calcul du pourcentage de décalage; où 100 est divisé par x, il doit être divisé par (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: Désolé pour la fabrication de ce commentaire comme une réponse. Je n'ai pas les crédits nécessaires pour faire des commentaires.

Vous devez vous connecter pour publier un commentaire.