• Najnowsze pytania
  • Bez odpowiedzi
  • Zadaj pytanie
  • Kategorie
  • Tagi
  • Zdobyte punkty
  • Ekipa ninja
  • IRC
  • FAQ
  • Regulamin
  • Książki warte uwagi

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

VPS Starter Arubacloud
+1 głos
125 wizyt
pytanie zadane 2 stycznia 2022 w HTML i CSS przez ShadoWs Bywalec (2,800 p.)
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 :)

1 odpowiedź

0 głosów
odpowiedź 2 stycznia 2022 przez Wiciorny Ekspert (269,120 p.)

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  

komentarz 3 stycznia 2022 przez ShadoWs Bywalec (2,800 p.)

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 :/

Podobne pytania

+4 głosów
2 odpowiedzi 599 wizyt
0 głosów
4 odpowiedzi 2,697 wizyt
pytanie zadane 24 lipca 2019 w HTML i CSS przez michal_php Stary wyjadacz (13,700 p.)
+1 głos
1 odpowiedź 1,894 wizyt
pytanie zadane 8 stycznia 2016 w HTML i CSS przez Cabanoss Nowicjusz (170 p.)

92,454 zapytań

141,262 odpowiedzi

319,089 komentarzy

61,854 pasjonatów

Motyw:

Akcja Pajacyk

Pajacyk od wielu lat dożywia dzieci. Pomóż klikając w zielony brzuszek na stronie. Dziękujemy! ♡

Oto polecana książka warta uwagi.
Pełną listę książek znajdziesz tutaj.

Akademia Sekuraka

Akademia Sekuraka 2024 zapewnia dostęp do minimum 15 szkoleń online z bezpieczeństwa IT oraz dostęp także do materiałów z edycji Sekurak Academy z roku 2023!

Przy zakupie możecie skorzystać z kodu: pasja-akademia - użyjcie go w koszyku, a uzyskacie rabat -30% na bilety w wersji "Standard"! Więcej informacji na temat akademii 2024 znajdziecie tutaj. Dziękujemy ekipie Sekuraka za taką fajną zniżkę dla wszystkich Pasjonatów!

Akademia Sekuraka

Niedawno wystartował dodruk tej świetnej, rozchwytywanej książki (około 940 stron). Mamy dla Was kod: pasja (wpiszcie go w koszyku), dzięki któremu otrzymujemy 10% zniżki - dziękujemy zaprzyjaźnionej ekipie Sekuraka za taki bonus dla Pasjonatów! Książka to pierwszy tom z serii o ITsec, który łagodnie wprowadzi w świat bezpieczeństwa IT każdą osobę - warto, polecamy!

...