Új hozzászólás Aktív témák

• #2468 Keem1 veterán

  Új Válasz 2020-10-03 13:45:31 #2468

  Új hozzászólás

  Összes hozzászólása itt Válaszok az összes hozzászólására itt Válaszok erre a hozzászólásra

  Privát üzenet küldése

  

  Keem1

  veterán

  Sziasztok! Előrebocsátom, nem vagyok profi programozó (de ismerem a programozás alapjait, használtam már PHP-t, C#-ot, valamennyire rémlik a Javascript és a CSS is), webbel évekkel ezelőtt foglalkoztam, amikor még olyan új kulcsszavak jelentek meg, mint responsive, css sprite és hasonlók.

  Most úgy alakult, hogy egy meglévő régi kód leporolásával egy ismerősnek dobok össze egy egyszerűbb PHP+MySQL siteot (tudom, van Wordpress és hasonlók, de az évek során sokat felejtettem, másrészt ezeket nem is ismerem, így mire ezek közül bármit elégségesen tanulmányoznék, már a saját régi kódból kész a cucc, amihez pár évig a kutya ne fog hozzányúlni).

  A kérdés: adott ugye egy png sprite, a benne lévő legtöbb képi elemet már felhasználtam. Azonban belekerült 12 db 124x124 pixel méretű ikon is, amikből előregyártott ikonok készíthetők, így: <div class="icon meret kepid">. Vagy példával: <div class="icon icon32px iconfacebook">
  Eddig minden faszán megy, addig a pontig, hogy a sprite mérete = céldiv mérete, tehát 1:1 arány a valós kép és a megjelenített div mérete között.

  Van tehát az én 12 db 124x124px méretű képecském, amiből lenne 3 méret alapból (később lehet több is): 24px, 32px, 48px. Nem szeretném átméretezgetni őket (mert akkor 12x annyi helyfoglalás, ahány méretet szándékozik használni az ismerős), helyette arra gondoltam, hogy ráguglizok arra, hogy scale, és inkább lesz egy elég nagy méretű alapanyag, amiből minőségromlás nélkül lehet kisebbeket gyártani on-the-fly. Itt vannak ilyen jóságok, hogy background-size, meg az egyes böngészők saját megoldása. Na de mi a kapcsolat a size és a position között? Mert hiába állítom be, hogy a position -500px -440px, az 1:1 méretnél jó, ha átállítom a size-t, máris ugrik az egész. És a vicc, hogy mindenütt ezt a két varázsszót említik, de hogy a kettő milyen viszonyban van, vagy egyikhez a másikat hogy tudom kiszámolni, azt már sehol.

  Példa legyen tehát az első ikonunk, ami alapbeállításokkal, tehát 1:1 méretben kb. így néz ki leegyszerűsítve:
  position: -500px -440px; width: 124px; height 124px; size: auto;
  Ezek után ez lenne a 32x32-es méret:
  position: -??px -??px; width: 32px; height 32px; size: ??%;
  Csak hát a számok nem jönnek ki, ez egyelőre egy kétismeretlenes egyenlet. De nem akarom senkivel megadatni az eredményt, hogy mindet én meg tudjam csinálni, a logika kéne, a köztük lévő kapocs, amivel gyerekjáték lenne a dolog.

  Valaki tud ebben segíteni?

Új hozzászólás Aktív témák