Изменение размера фонового изображения спрайта для соответствия div
Я создаю карточную игру. У меня есть спрайт-образ карт.
Скажем в спрайте, каждая из карт имеет ширину 50 пикселей и высоту 80 пикселей.
![enter image description here]()
Теперь у меня есть div, где я хочу разместить эти карты.
![enter image description here]()
Скажите, что 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 ниже.
![enter image description here]()
Таким образом, карта 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: Извините за комментарий в качестве ответа. У меня нет необходимых кредитов для комментариев.
Теперь у меня есть div, где я хочу разместить эти карты.
