Łączenie kwadratów dla obiektów. Ekwipunek z gry.

Question

Witam.
Mam taką siatkę 5x9 https://codepen.io/wixser/pen/qBPovaq.
W każdym z tych kwadratów będę chciał osadzać ikonkę z itemem (taki ekwipunek z gry) Mam tylko mały problem. Niektóre obiekty są na wysokość 2 a nawet 3 kwadratów. Widać to np na 1 kwadracie jest miecz który powinien zająć 2 kwadraty.

Jak to sensownie zrobić żeby item zajmował daną wysokość?
Z góry wielkie dzięki za pomoc :)

Answer 1

Jak to sensownie zrobić żeby item zajmował daną wysokość?

jeśli ma zajmować wysokość kratki, a nie względem siebie jeśli jest większy to kilku kratek to po prostu skalować wszystkie zdjęcia na wielkość kratki. Skoro wielkość kratki- się nie zmienia, to zdjęcie które ładujesz ustal na sztywno  
automatycznie skaluj element do kontenera w którym się znajduje 
oczywiście ja to zrobiłem dla "img" po prostu, ale tutaj musisz sam doprecyzować -> być może nadać konkretną klase dla elementów obrazków 

 img {
    top: 50%;
    left: 50%;
/*     transform: translateX(-50%) translateY(-50%); */
    max-width: 100%;
    max-height: 100%;
}

to tylko tak dla przykładu możesz manipulować rozmiarem  

Comments

Dzięki za radę. Rozważam to wyjście. Jednak najbardziej zależy mi na tym żeby to tak wyglądało jak na obrazku poniżej :/