Képek nagyítása rácsos elrendezésben

A CSS Gridnek köszönhetően a képek rácsának létrehozása egyszerű. De a rácsot varázslatos dolgokra készteti után az elhelyezett képeket nehézkes lehet lehúzni.

Tegyük fel, hogy valami díszes lebegési effektust szeretne hozzáadni a képekhez, ahol nőnek, és túl nagyítani szeretné a sorokat és oszlopokat, ahol vannak? Meg tudjuk csinálni!

Menő, igaz? Ha ellenőrzi a kódot, nem fog találni semmilyen JavaScriptet, összetett szelektorokat vagy akár mágikus számok. És ez csak egy példa a sok közül, amelyeket megvizsgálunk!

A rács építése

A rács létrehozásához szükséges HTML-kód olyan egyszerű, mint egy tárolón belüli képek listája. Ennél több nem kell nekünk.

<div class="gallery">
  <img>
  <img>
  <img>
  <!-- etc. -->
</div>

A CSS-nél először a rács beállításával kezdjük a következőképpen:

.gallery {
  --s: 150px; /* controls the size */
  --g: 10px;  /* controls the gap */

  display: grid;
  gap: var(--g);
  width: calc(3*var(--s) + 2*var(--g)); /* 3 times the size plus 2 times the gap */
  aspect-ratio: 1;
  grid-template-columns: repeat(3, auto);
}

Röviden, két változónk van, az egyik a képek méretét szabályozza, a másik pedig a képek közötti távolság méretét. aspect-ratio segít arányban tartani a dolgokat.

Elgondolkodhat azon, hogy miért csak három oszlopot határozunk meg, sorokat nem. Nem, nem felejtettem el a sorokat – csak nem kell kifejezetten beállítani őket. A CSS Grid képes automatikusan elhelyezni az elemeket implicit sorok és oszlopok, vagyis annyi sort kapunk, amennyi szükséges, tetszőleges számú képhez, amit rádobunk. Ehelyett kifejezetten meghatározhatjuk a sorokat, de hozzá kell adnunk grid-auto-flow: column hogy a böngésző létrehozza nekünk a szükséges oszlopokat.

Íme egy példa mindkét eset illusztrálására. A különbség az, hogy az ember befolyik a row irány és a másik a column irány.

Nézze meg ez a másik cikk, amit írtam ha többet szeretne megtudni az implicit rácsokról és az automatikus elhelyezési algoritmusról.

Most, hogy megvan a rácsunk, ideje módosítani a képek stílusát:

.gallery > img {
  width: 0;
  height: 0;
  min-height: 100%;
  min-width: 100%;
  object-fit: cover;
}

Az általunk létrehozott lebegési effektus ezen a CSS-en alapul. Valószínűleg furcsának tűnik, hogy olyan képeket készítünk, amelyeknek nincs szélessége és magassága, de minimális szélessége és magassága 100%. De látni fogja, hogy ez egy elég ügyes trükk ahhoz, amit el akarunk érni.

Itt azt mondom a böngészőnek, hogy a képeknek rendelkezniük kell 0 szélessége és magassága, de a minimális magasságnak is egyenlőnek kell lennie 100%… de 100% miből? Százalékok használatakor az érték a valami máshoz képest. Ebben az esetben a képünk a belsejébe kerül rácscella és tudnunk kell ezt a méretet, hogy tudjuk, mi az 100% relatív.

A böngésző először figyelmen kívül hagyja min-height: 100% a rácscellák méretének kiszámításához, de a height: 0 számításában. Ez azt jelenti, hogy képeink nem járulnak hozzá a rácscellák méretéhez… mert technikailag nincs fizikai méretük. Ez három egyenlő oszlopot és sort eredményez, amelyek a rács méretén alapulnak (amit a .galleryszélessége és aspect-ratio). Az egyes rácscellák magassága nem más, mint a változó --s definiáltunk (ugyanez a szélességre).

Most, hogy megvannak a rácsunk celláinak méretei, a böngésző ezt fogja használni min-height: 100% (És min-width: 100%), amely arra kényszeríti a képeket, hogy teljesen kitöltsék az egyes rácscellák terét. Az egész dolog kissé zavarosnak tűnhet, de a fő ötlet az, hogy megbizonyosodjon arról, hogy a rács határozza meg a képek méretét, nem pedig fordítva. Nem akarom, hogy a kép határozza meg a rács méretét, és a lebegési effektus hozzáadása után megérti, miért.

Lebegő effektus létrehozása

Amit tennünk kell, az az, hogy növeljük a képek léptékét, amikor lebegtetik őket. Ezt egy kép beállításával tehetjük meg width és a height on :hover:

.gallery {
  --f: 1.5; /* controls the scale factor */
}

.gallery img:hover{
  width:  calc(var(--s) * var(--f));
  height: calc(var(--s) * var(--f));
}

Hozzáadtam egy új egyéni változót, --f, a keverékhez léptéktényezőként a méret szabályozásához. Figyeld meg, hogyan szorzom a méretváltozót, --s, segítségével kiszámíthatja az új képméretet.

De azt mondtad, hogy a képméretnek 0-nak kell lennie. Mi történik? Elvesztem…

Amit mondtam, továbbra is igaz, de kivételt teszek a lebegő kép miatt. Azt mondom a böngészőnek, hogy csak egy kép mérete nem egyenlő nullával – tehát ez hozzájárul a rács méretéhez –, míg az összes többi egyenlő marad 0.

A bal oldalon a rács természetes állapotában látható lebegtetett képek nélkül, amit a jobb oldal is mutat. A bal oldalon lévő összes rácscella egyenlő méretű, mivel az összes képnek nincs fizikai mérete.

A jobb oldalon az első sor második képe látható, ami olyan méreteket ad neki, amelyek befolyásolják a rácscella méretét. A böngésző az adott rácscellát megnöveli, ha lebeg, ami hozzájárul a teljes mérethez. És mivel az egész rács mérete be van állítva (mert beállítottunk egy fix width a .gallery), a többi rácscella logikusan úgy reagál, hogy kisebb lesz, hogy megtartsa a .gallery's teljes mérete tapintatban.

Ez a zoom hatásunk működés közben! Egyetlen kép méretének növelésével a teljes rácskonfigurációt befolyásoljuk, és korábban már említettük, hogy a rács úgy határozza meg a képek méretét, hogy minden kép a rácscelláján belül nyúlik, hogy kitöltse az egész teret.

Ehhez adunk hozzá egy csipetnyit transition És használni object-fit hogy elkerüljük a képtorzulást és az illúzió tökéletes!

Tudom, hogy a trükk mögött meghúzódó logikát nem könnyű megragadni. Ne aggódj, ha nem érted teljesen. A legfontosabb az, hogy megértsük a használt kód szerkezetét, és hogyan módosítsuk azt, hogy több variációt kapjunk. Ezt fogjuk tenni legközelebb!

További képek hozzáadása

Létrehoztunk egy 3×3-as rácsot, hogy elmagyarázzuk a fő trükköt, de valószínűleg sejtitek, hogy nem kell itt megállnunk. Az oszlopok és sorok számát változókká tehetjük, és tetszőleges számú képet adhatunk hozzá.

.gallery {
  --n: 3; /* number of rows*/
  --m: 4; /* number of columns */
  --s: 150px; /* control the size */
  --g: 10px;  /* control the gap */
  --f: 1.5;   /* control the scale factor */

  display: grid;
  gap: var(--g);
  width:  calc(var(--m)*var(--s) + (var(--m) - 1)*var(--g));
  height: calc(var(--n)*var(--s) + (var(--n) - 1)*var(--g));
  grid-template-columns: repeat(var(--m),auto);
}

Két új változónk van a sorok és oszlopok számára. Ezután egyszerűen meghatározzuk a rácsunk szélességét és magasságát ezek segítségével. Ugyanazért grid-template-columns amely a --m változó. És csakúgy, mint korábban, nem kell kifejezetten meghatároznunk a sorokat, mivel a CSS Grid automatikus elhelyezési funkciója elvégzi helyettünk a munkát, függetlenül attól, hogy hány képelemet használunk.

Miért nem különbözik a szélesség és a magasság értékek? Meg tudjuk csinálni:

.gallery {
  --n: 3; /* number of rows*/
  --m: 4; /* number of columns */
  --h: 120px; /* control the height */
  --w: 150px; /* control the width */
  --g: 10px;  /* control the gap */
  --f: 1.5;   /* control the scale factor */

  display: grid;
  gap: var(--g);
  width:  calc(var(--m)*var(--w) + (var(--m) - 1)*var(--g));
  height: calc(var(--n)*var(--h) + (var(--n) - 1)*var(--g));
  grid-template-columns: repeat(var(--m),auto);
}

.gallery img:hover{
  width:  calc(var(--w)*var(--f));
  height: calc(var(--h)*var(--f));
}

Cseréljük --s két változóval, az egyik a szélességre, --w, és még egyet a magasságért, --h. Ezután minden mást ennek megfelelően állítunk be.

Tehát egy fix méretű és elemszámú ráccsal kezdtünk, de aztán készítettünk egy új változókészletet, hogy tetszőleges konfigurációt kapjunk. Csak annyi képet kell hozzáadnunk, amennyit csak akarunk, és ennek megfelelően állítjuk be a CSS-változókat. A kombinációk határtalanok!

Teljes képernyős képgaléria

Mi a helyzet a teljes képernyős verzióval? Igen, ez is lehetséges. Csak tudnunk kell, hogy milyen értékeket kell hozzárendelnünk a változóinkhoz. Ha akarjuk N képsorokat, és azt szeretnénk, hogy a rácsunk teljes képernyős legyen, először a magasságot kell megoldanunk 100vh:

var(--n) * var(--h) + (var(--n) - 1) * var(--g) = 100vh

Ugyanez a logika a szélességre, de használ vw helyett vh:

var(--m) * var(--w) + (var(--m) - 1) * var(--g) = 100vw

Kiszámoljuk, hogy megkapjuk:

--w: (100vw - (var(--m) - 1) * var(--g)) / var(--m)
--h: (100vh - (var(--n) - 1) * var(--g)) / var(--n)

Kész!

Ez pontosan ugyanaz a HTML, de néhány frissített változóval, amelyek megváltoztatják a rács méretét és viselkedését.

Vegye figyelembe, hogy kihagytam a képletet, amelyet korábban beállítottunk a .gallery„s width és a height és helyébe őket 100vw és a 100vh, ill. A képlet ugyanazt az eredményt adja, de mivel tudjuk, hogy milyen értéket akarunk, eltekinthetünk attól a bonyolultságtól.

Egyszerűsíthetjük is a --h és a --w az egyenletből a rést ennek javára eltávolítva:

--h: calc(100vh / var(--n)); /* Viewport height divided by number of rows */
--w: calc(100vw / var(--m)); /* Viewport width divided by number of columns */

Ezzel a lebegtetett kép egy kicsit jobban megnő, mint az előző példában, de ez nem nagy baj, mivel a léptéket a --f változót, amelyet szorzóként használunk.

És mivel a változókat egy helyen használják, továbbra is egyszerűsíthetjük a kódot, ha teljesen eltávolítjuk őket:

Fontos megjegyezni, hogy ez az optimalizálás csak a teljes képernyős példára vonatkozik, az általunk tárgyalt példákra nem. Ez a példa egy különleges eset, amikor könnyebbé tehetjük a kódot, ha eltávolítunk néhány bonyolult számítási munkát, amelyre a többi példában szükségünk volt.

Valójában mindenünk megvan, ami a táguló panelek népszerű mintájának létrehozásához szükséges:

Ássunk még mélyebbre

Észrevette, hogy a léptéktényezőnk kisebb is lehet, mint 1? Meghatározhatjuk, hogy a lebegtetett kép mérete kisebb legyen, mint --h or --w de a kép lebegve nagyobb lesz.

A kezdeti rácscella mérete egyenlő --w és a --h, akkor miért egy kisebb érték teszi a rácscellát nagyobb? A sejtnek nem kellene kapnia kisebb, vagy legalább megtartja a kezdeti méretét? És mekkora a rácscella végső mérete?

Mélyebbre kell ásnunk, hogyan számítja ki a CSS Grid algoritmus a rácscellák méretét. Ez magában foglalja a CSS Grid alapértelmezett értékének megértését feszített igazítás.

Íme egy példa a logika megértéséhez.

A demó bal oldalán egy két oszlopot határoztam meg -val auto szélesség. Az intuitív eredményt kapjuk: két egyenlő oszlop (és két egyenlő rácscella). De a rácsot a demó jobb oldalán állítottam be, ahol az igazítást frissítem a segítségével place-content: start, úgy tűnik, nincs semmi.

A DevTools mindkét esetben segít megmutatni, mi is történik valójában:

A második rácsban két oszlop van, de ezek szélessége nulla, így két rácscellát kapunk, amelyek a rácstároló bal felső sarkában vannak összecsukva. Ez nem hiba, de a rács igazításának logikus eredménye. Amikor egy oszlopot (vagy sort) méretezünk azzal auto, ez azt jelenti, hogy a tartalma szabja meg a méretét – de van egy üres div tartalom nélkül, aminek helyet lehetne adni.

De azóta stretch az alapértelmezett igazítás, és van elég helyünk a rácsunkon belül, a böngésző mindkét rácscellát egyformán kinyújtja, hogy az egész területet lefedje. Így kanyarodik fel a bal oldali rács két egyenlő oszloppal.

Tól től a specifikációt:

Vegye figyelembe, hogy bizonyos értékek a justify-content és a align-content okozhatja a sávok távolságát (space-around, space-between, space-evenly) vagy átméretezendő (stretch).

Jegyezze meg az „átméretezendő”, ami itt a kulcs. Az utolsó példában használtam place-content aminek a rövidítése justify-content és a align-content

És ez valahol el van temetve a Grid Sizing algoritmus szemüveg:

Ez a lépés kibontja azokat a számokat, amelyek rendelkeznek egy auto max pályaméretezés funkció a maradék pozitív elosztásával, határozott szabad hely egyformán köztük. Ha a szabad hely az határozatlan, De a rács konténer határozott min-szélesség/magasság, használja ezt a méretet a lépés szabad helyének kiszámításához.

Az „egyenlően” megmagyarázza, hogy miért zárjuk le az egyenlő rácscellákat, de ez a „szabad területre” vonatkozik, ami nagyon fontos.

Vegyük az előző példát, és adjunk hozzá tartalmat az egyikhez divs:

Hozzáadtunk egy négyzetet 50px kép. Az alábbiakban bemutatjuk, hogyan reagálnak a példánkban szereplő rácsok az adott képre:

Az első esetben azt láthatjuk, hogy az első cella (pirossal) nagyobb, mint a második (kék). A második esetben az első cella mérete megváltozik, hogy illeszkedjen a kép fizikai méretéhez, míg a második cella mérete nélkül marad. A szabad terület egyenlő arányban oszlik meg, de az első cellában több tartalom van, ami nagyobbá teszi.

Ez a matematika a szabad helyünk kiszámításához:

(grid width) - (gap) - (image width) = (free space)
200px - 5px - 50px = 145px 

Kettővel elosztva - az oszlopok számával - kapjuk a szélességet 72.5px minden oszlophoz. De hozzáadjuk a kép méretét, 50px, az első oszlopba, amely egy oszlopot hagy a címen 122.5px a második pedig egyenlő 72.5px.

Ugyanez a logika vonatkozik a mi képrácsunkra is. Az összes kép mérete egyenlő 0 (nincs tartalom), míg a lebegtetett kép hozzájárul a mérethez – még akkor is, ha csak 1px — a rácscellája nagyobb, mint a többi. Emiatt a léptéktényező bármely értéknél nagyobb lehet 0 akár tizedesjegyek között 0 és a 1.

A rácscellák végső szélességének meghatározásához ugyanazt a számítást végezzük, hogy megkapjuk a következőket:

(container width) - (sum of all gaps) - (hovered image width) = (free space)

A tartály szélességét a következők határozzák meg:

var(--m)*var(--w) + (var(--m) - 1)*var(--g)

…és az összes hézag egyenlő:

(var(--m) - 1)*var(--g)

…és a lebegtetett képhez a következőket találjuk:

var(--w)*var(--f)

Mindezt a változóinkkal kiszámíthatjuk:

var(--m)*var(--w) - var(--w)*var(--f) = var(--w)*(var(--m) - var(--f))

Az oszlopok számát a --m , ezért a szabad helyet egyenlően osztjuk el, így kapjuk:

var(--w)*(var(--m) - var(--f))/var(--m)

…ez adja meg a nem lebegtetett képek méretét. A lebegtetett képekhez ez van:

var(--w)*(var(--m) - var(--f))/var(--m) + var(--w)*var(--f)
var(--w)*((var(--m) - var(--f))/var(--m) + var(--f))

Ha szabályozni akarjuk a lebegtetett kép végső méretét, akkor a fenti képlet alapján kapjuk meg a kívánt pontos méretet. Ha például azt szeretnénk, hogy a kép kétszer akkora legyen:

(var(--m) - var(--f))/var(--m) + var(--f) = 2

Tehát a skála szorzónk értéke, --f, egyenlőnek kell lennie:

var(--m)/(var(--m) - 1)

Három oszlopra leszünk 3/2 = 1.5 és ezt a léptéktényezőt használtam ennek a cikknek az első demójában, mert szerettem volna kétszer akkora képet csinálni lebegve!

Ugyanez a logika vonatkozik a magasságszámításra is, és abban az esetben, ha mindkettőt egymástól függetlenül akarjuk vezérelni, két léptéktényezőt kell figyelembe vennünk, hogy megbizonyosodjunk arról, hogy egy adott szélesség és magasság a lebegésnél van.

.gallery {
  /* same as before */
   --fw: 1.5; /* controls the scale factor for the width */
   --fh: 1.2; /* controls the scale factor for the height */

  /* same as before */
}

.gallery img:hover{
  width:  calc(var(--w)*var(--fw));
  height: calc(var(--h)*var(--fh));
}

Most már ismeri az összes titkot annak érdekében, hogy bármilyen képrácsot készítsen hűvös lebegtetési effektussal, miközben az imént tárgyalt matematikai számítások segítségével szabályozhatja a kívánt méretezést.

Csomagolta

Az én utolsó cikk, létrehoztunk egy összetett kinézetű rácsot néhány soros CSS-ből, amely felhasználja a CSS Grid implicit rácsát és az automatikus elhelyezés funkcióit. Ebben a cikkben néhány CSS-rács-méretezési trükkre támaszkodtunk, hogy létrehozzunk egy képzeletbeli rácsot a képekből, amelyek ráközelítenek az egérmutatóra, és ennek megfelelően módosítják a rácsot. Mindezt egy egyszerűsített kóddal, amely CSS-változók segítségével könnyen beállítható!

A következő cikkben a formákkal fogunk játszani! Kombináljuk a CSS-rácsot a maszkkal és a klip-útvonallal, hogy fantasztikus képrácsot kapjunk.