Изменение размера фонового изображения спрайта для соответствия div

Я создаю карточную игру. У меня есть спрайт-образ карт. Скажем в спрайте, каждая из карт имеет ширину 50 пикселей и высоту 80 пикселей. Теперь у меня есть div, где я хочу разместить эти карты.

Скажите, что Divs имеют ширину 100 пикселей и высоту 160 пикселей.

Я использую первое изображение как Sprite для Divs, как показано ниже.

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

Я изменяю позиции x и y так, чтобы разные divs получали diff-карты.

Какое свойство CSS я использую, чтобы сделать фоновое изображение подходящим для Div? Мне не разрешено изменять размер спрайтов или Div.

Теперь я собираюсь перетащить эти карты и поместить их в несколько слотов, как показано на рисунке 1-13 ниже.

Таким образом, карта div будет иметь переменную ширину. Фоновому изображению необходимо изменить размер, чтобы он соответствовал ширине переменной div. Как мне это сделать? Должен ли я использовать несколько спрайтов разных размеров?

Спасибо!

Ответ 1

Вы можете достичь этого, используя свойство 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/.

Ответ 2

Привет, это самый простой способ сделать то, что вам нужно!

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/

Привет

Альфану

Ответ 3

Другим решением является создание SVG и назначение атрибутов class для разных групп путей (каждый из которых представляет/создает карту). Если все группы путей имеют position: absolute и display: none, вы можете отобразить только группу путей, соответствующую элементу карты контейнера, и растянуть его до полной ширины и высоты с помощью чистого изменения размера вектора.

Это создаст огромное количество разметки, поэтому лучше всего здесь, вероятно, быть на SVG на карту.

У Криса Койера отличная статья об использовании 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... */

Ответ 4

Для обычного изображения max-width: 100% и Max-height: 100% необходимо принудительно изменить размер изображения на div.

Для фонового изображения background-size: 100% должно работать.

Ответ 5

Я бы предложил иметь 2 спрайта, главным образом потому, что у вас есть меньшее разрешение в вашем примере спрайта, а затем выглядело бы хорошо в примере div.

Ответ 6

Это сделает то, что, как я считаю, вы ищете и должно поддерживаться для всех браузеров.

Скажите, что вам нужен король в определенном слоте, что бы вы сделали, это разместить эти два класса в вашем 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/

Ответ 7

Александр Валлин отвечает! Но я считаю, что в формуле для вычисления процентного смещения имеется небольшая ошибка; где 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: Извините за комментарий в качестве ответа. У меня нет необходимых кредитов для комментариев.