Pytanie Zmiana rozmiaru obrazu ikonki dla dopasowania div


Tworzę grę karcianą. Mam sprite obraz kart. Powiedz w sprite'u, każda z kart ma 50px szerokości i 80px high. enter image description here Teraz mam kilka elementów, w których chcę umieścić te karty. enter image description here 

Powiedzmy, że Div mają szerokość 100 pikseli i 160 pikseli.

Używam pierwszego obrazu jako Sprite dla Div, jak na poniższym rysunku.

background: url (../ images / poker_sprite.gif) brak powtórzeń scroll 0 0 transparent;

Zmieniam pozycje x i y, aby różni div dostali karty diff.

Jakiej właściwości CSS używam, aby obraz tła pasował do Div? Nie wolno mi zmieniać wielkości Sprites ani Div.

Teraz zamierzam przeciągnąć te karty i umieścić je w niektórych slotach zaznaczonych 1-13 poniżej. enter image description here

Więc div karty będzie miał zmienną szerokość. Obraz tła będzie musiał zmienić rozmiar, aby zmieścił się w div o zmiennej szerokości. Jak mam to zrobić? Czy powinienem używać wielu duszków o różnych rozmiarach?

Dzięki !


14
2017-08-29 01:14


pochodzenie


Czy próbujesz dopasować określone obrazy z dużego arkusza do góry do elementu div? - ZeroPhase


Odpowiedzi:


Możesz to osiągnąć za pomocą background-size Właściwość, chociaż wyniki mogą nie być zbyt ładne, ponieważ rozciąga obraz tła.

Tak więc, jeśli wiesz, że twój sprite jest dokładnie w rozmiarze 13x5, możesz oddać karty background-size: 1300% 500% a następnie dopasuj je w dowolny sposób, ponieważ samo tło będzie odpowiednio skalowane.

Przykład

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

Możesz przeczytać o kompensowaniu tła w procentach w MDN.

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


20
2017-08-29 01:35



Wspaniały !! Myślę, że właśnie tego chciałem. Nie wiedziałem, że rozmiar tła może zostać użyty w ten sposób. Pozwól mi to wypróbować. - geeky_monster
Zrób to. Powinieneś o tym pamiętać background-size nie jest obsługiwane w IE8 i poniżej. - Alexander Wallin
Ok. Bez obaw. To działa . Na razie kierujemy się do przeglądarek WebKit. - geeky_monster
Co mam zrobić, jeśli później używam Javascript, aby zmienić wysokość i szerokość? Uważam, że obraz tła zostaje zmieniony na inną kartę. - geeky_monster
Łał. Całkowicie pracował. Nie miałem pojęcia, że ​​to możliwe. - Gabriel Yarra


Cześć, to najprostszy sposób robienia tego, o co prosisz!

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>

Spowoduje to załadowanie obrazu i przygotowanie go do zmiany rozmiaru!

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

pozdrowienia

Alphanu


2
2017-12-11 05:24



Najważniejsze rozwiązanie IMHO. Kluczowym punktem jest skalowanie w tle. Pozwala na użycie względnych jednostek do ustawienia z / height elementu takiego jak vw / vh. - srgg6701


Innym rozwiązaniem jest utworzenie SVG i przypisanie class atrybuty do różnych grup ścieżek (każda reprezentuje / renderuje kartę). Jeśli wszystkie grupy ścieżek mają position: absolute i display: nonemożna wyświetlić tylko grupę ścieżek dopasowaną do elementu karty kontenera i rozciągnąć ją do pełnej szerokości i wysokości z czystym przeskalowaniem wektorowym.

Spowoduje to wygenerowanie ogromnych ilości znaczników, więc najlepszą rzeczą będzie prawdopodobnie SVG na kartę.

Chris Coyier ma doskonały artykuł o używaniu SVG.

Przykład

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
2017-08-29 01:52



SVG z <defs> i <use> zrobiłby świetną robotę z minimalnym dodatkowym znacznikiem. Umożliwiłoby to również dokładniejszą zmianę rozmiaru - Mark K Cowan


Sugerowałbym posiadanie 2 duszków, głównie dlatego, że masz mniejszą rozdzielczość w twoim sprite'u, wtedy wyglądałoby dobrze w przykładzie div.


0
2017-08-29 01:21



Kompletnym sposobem radzenia sobie z tym byłoby utworzenie SVG i przypisanie class atrybuty do różnych grup ścieżek (każda reprezentująca kartę). Jeśli wszystkie grupy ścieżek mają position: absolute i display: nonemożna wyświetlić tylko grupę ścieżek dopasowaną do elementu karty kontenera i rozciągnąć ją do pełnej szerokości i wysokości z czystym przeskalowaniem wektorowym. - Alexander Wallin


Dla zwykłego obrazu max-width: 100% i Max-height: 100% powinien zmusić obraz do zmiany rozmiaru na div.

Dla obrazu tła background-size: 100% powinno działać.


0
2017-08-29 01:17



To jest obraz w tle. Nie zmienia rozmiaru za pomocą właściwości max-width i max-height - geeky_monster
Jeśli nie zamierzasz używać wielu duszków dla każdego rozmiaru, myślę background-size: 100% powinno działać. - ZeroPhase
Jeśli używam wielkości tła: 100%, cały sprite wchodzi i pasuje do div - nie tylko jednej karty. - geeky_monster
Och, myślałem, że każda karta to osobny sprite. - ZeroPhase
Czy każda z komórek jest podzielona na osobne? divs? - ZeroPhase


Spowoduje to wykonanie tego, co uważam za pożądane i powinno być obsługiwane we wszystkich przeglądarkach.

Powiedzmy, że chcesz króla w konkretnym gnieździe, to co możesz zrobić, to umieścić te dwie klasy w swoich 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;
}

Teraz dla html, którego potrzebujesz

<div class="play-area">
    <div class="king"></div>
</div>

Wszystko, co musisz zrobić, to bawić się liczbami, tak aby granice wyświetlanych kart wyglądały poprawnie.

Oto skrzypce: http://jsfiddle.net/j3xXe/4/


0
2017-08-29 02:07





Odpowiedź Alexandra Wallina jest świetna! Sądzę jednak, że w formule obliczania przesunięcia procentowego występuje mały błąd; gdzie 100 jest podzielone przez x, powinno być podzielone przez (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: Przepraszamy za zgłoszenie tego komentarza jako odpowiedzi. Nie mam niezbędnych kredytów do robienia komentarzy.


0
2018-03-16 08:33