Povečanje slik v mrežni postavitvi

Ustvarjanje mreže slik je preprosto, zahvaljujoč mreži CSS. Toda omogočiti, da mreža dela čudovite stvari po slike, ki so bile postavljene, je lahko težavno odstraniti.

Recimo, da želite slikam dodati nekaj modnega učinka lebdenja, kjer rastejo in povečajo onkraj vrstic in stolpcev, kjer se nahajajo? To zmoremo!

Kul, kajne? Če preverite kodo, ne boste našli nobenega JavaScripta, kompleksnih izbirnikov ali celo magične številke. In to je le en primer izmed mnogih, ki jih bomo raziskali!

Gradnja mreže

Koda HTML za ustvarjanje mreže je tako preprosta kot seznam slik v vsebniku. Več kot to ne potrebujemo.

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

Za CSS najprej začnemo z nastavitvijo mreže z naslednjim:

.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);
}

Skratka, imamo dve spremenljivki, eno, ki nadzira velikost slik, in drugo, ki nastavi velikost vrzeli med slikami. aspect-ratio pomaga ohranjati stvari v sorazmerju.

Morda se sprašujete, zakaj definiramo samo tri stolpce, ne pa tudi vrstic. Ne, nisem pozabil vrstic — samo ni nam jih treba izrecno nastaviti. CSS Grid je sposoben samodejno postaviti elemente na implicitne vrstice in stolpce, kar pomeni, da dobimo toliko vrstic, kot jih potrebujemo za poljubno število slik, ki jih vržemo vanj. Namesto tega lahko izrecno definiramo vrstice, vendar jih moramo dodati grid-auto-flow: column da se prepričamo, da nam bo brskalnik ustvaril potrebne stolpce.

Tukaj je primer za ponazoritev obeh primerov. Razlika je v tem, da ena teče v a row smer in druga v a column smeri.

Preveri ta drugi članek sem napisal za več o implicitnih mrežah in algoritmu za samodejno umestitev.

Zdaj, ko imamo svojo mrežo, je čas, da oblikujemo slike:

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

Učinek lebdenja, ki ga ustvarjamo, je odvisen od tega CSS. Verjetno se vam zdi nenavadno, da izdelujemo slike, ki nimajo širine ali višine, vendar imajo najmanjšo širino in višino 100 %. Videli pa boste, da je to precej dober trik za to, kar poskušamo doseči.

Tukaj brskalniku sporočam, da morajo imeti slike 0 širino in višino, vendar mora imeti tudi najmanjša višina enaka 100%... ampak 100% česa? Pri uporabi odstotkov je vrednost glede na nekaj drugega. V tem primeru je naša slika postavljena znotraj a mrežna celica in vedeti moramo to velikost, da vemo, kaj je 100% je relativno na.

Brskalnik bo najprej prezrl min-height: 100% za izračun velikosti mrežnih celic, vendar bo uporabil height: 0 v svojem izračunu. To pomeni, da naše slike ne bodo prispevale k velikosti mrežnih celic ... ker tehnično nimajo fizične velikosti. To bo povzročilo tri enake stolpce in vrstice, ki temeljijo na velikosti mreže (ki smo jo definirali na .galleryširina in aspect-ratio). Višina vsake mrežne celice ni nič drugega kot spremenljivka --s smo določili (enako za širino).

Zdaj, ko imamo dimenzije celic naše mreže, jih bo brskalnik uporabil z min-height: 100% (In min-width: 100%), zaradi česar bodo slike v celoti zapolnile prostor vsake mrežne celice. Vse skupaj morda izgleda nekoliko zmedeno, vendar je glavna ideja zagotoviti, da mreža določa velikost slik in ne obratno. Ne želim, da slika določa velikost mreže in po dodajanju učinka lebdenja boste razumeli, zakaj.

Ustvarjanje učinka lebdenja

Kar moramo storiti, je povečati merilo slik, ko lebdimo nanje. To lahko storimo tako, da prilagodimo sliko width in 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));
}

Dodal sem novo spremenljivko po meri, --f, v mešanico kot faktor lestvice za nadzor velikosti pri lebdenju. Opazite, kako množim spremenljivko velikosti, --s, za izračun nove velikosti slike.

Vendar ste rekli, da mora biti velikost slike 0. Kaj se dogaja? Izgubljen sem…

Kar sem rekel, je še vedno res, vendar delam izjemo za lebdečo sliko. Brskalniku povem, da bo samo ena slika imela velikost, ki ni enaka nič — torej bo prispevala k dimenziji mreže — medtem ko bodo vse druge ostale enake 0.

Leva stran prikazuje mrežo v naravnem stanju brez lebdečih slik, kar je prikazano na desni strani. Vse celice mreže na levi strani so enake velikosti, saj vse slike nimajo fizičnih dimenzij.

Na desni strani je druga slika v prvi vrstici lebdeča, kar ji daje dimenzije, ki vplivajo na velikost celice mreže. Brskalnik bo to določeno mrežno celico povečal, ko premaknete miškin kazalec, kar prispeva k skupni velikosti. In ker je nastavljena velikost celotne mreže (ker smo nastavili fiksno width o .gallery), se bodo druge celice mreže logično odzvale tako, da bodo postale manjše, da bi ohranile .gallerysplošna velikost v taktu.

To je naš učinek povečave v akciji! S povečanjem velikosti samo ene slike vplivamo na celotno konfiguracijo mreže in prej smo rekli, da mreža določa velikost slik, tako da se vsaka slika razteza znotraj svoje mrežne celice, da zapolni ves prostor.

Temu dodamo pridih transition in uporaba object-fit da se izognete popačenju slike in iluzija je popolna!

Vem, da logike za trikom ni enostavno razumeti. Ne skrbite, če tega ne razumete popolnoma. Najpomembneje je razumeti strukturo uporabljene kode in kako jo spremeniti, da dobite več različic. To bomo naredili naslednje!

Dodajanje več slik

Ustvarili smo mrežo 3 × 3, da bi razložili glavni trik, vendar ste verjetno uganili, da se nam ni treba ustaviti pri tem. Število stolpcev in vrstic lahko naredimo kot spremenljivko in dodamo poljubno število slik.

.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);
}

Imamo dve novi spremenljivki za število vrstic in stolpcev. Nato z njimi preprosto določimo širino in višino naše mreže. Enako za grid-template-columns ki uporablja --m spremenljivka. In tako kot prej nam ni treba izrecno definirati vrstic, saj bo funkcija samodejne umestitve mreže CSS opravila delo namesto nas, ne glede na to, koliko slikovnih elementov uporabljamo.

Zakaj ne različne vrednosti za širino in višino? To lahko storimo:

.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));
}

Zamenjamo --s z dvema spremenljivkama, eno za širino, --w, in še enega za višino, --h. Nato temu prilagodimo vse ostalo.

Tako smo začeli z mrežo s fiksno velikostjo in številom elementov, potem pa smo naredili nov nabor spremenljivk, da smo dobili poljubno želeno konfiguracijo. Vse kar moramo storiti je, da dodamo toliko slik, kot želimo, in temu primerno prilagodimo spremenljivke CSS. Kombinacije so neomejene!

Celozaslonska galerija slik

Kaj pa celozaslonska različica? Da, tudi to je možno. Vse kar potrebujemo je vedeti, katere vrednosti moramo dodeliti svojim spremenljivkam. Če želimo N vrstic slik in želimo, da je naša mreža celozaslonska, moramo najprej določiti višino 100vh:

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

Ista logika za širino, vendar z uporabo vw Namesto vh:

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

Izračunamo, da dobimo:

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

Končano!

To je povsem enak HTML, vendar z nekaj posodobljenimi spremenljivkami, ki spremenijo velikost in obnašanje mreže.

Upoštevajte, da sem izpustil formulo, ki smo jo predhodno nastavili na .galleryje width in height in jih zamenjal z 100vw in 100vh, oz. Formula nam bo dala enak rezultat, a ker vemo, kakšno vrednost želimo, lahko opustimo vso to dodatno zapletenost.

Lahko tudi poenostavimo --h in --w z odstranitvijo vrzeli iz enačbe v korist tega:

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

S tem bo lebdeča slika zrasla nekoliko bolj kot v prejšnjem primeru, vendar to ni nič posebnega, saj lahko merilo nadzorujemo z --f spremenljivko, ki jo uporabljamo kot množitelj.

In ker so spremenljivke uporabljene na enem mestu, lahko še vedno poenostavimo kodo tako, da jih v celoti odstranimo:

Pomembno je omeniti, da ta optimizacija velja samo za celozaslonski primer in ne za primere, ki smo jih obravnavali. Ta primer je poseben primer, ko lahko naredimo kodo lažjo tako, da odstranimo nekaj kompleksnega računskega dela, ki smo ga potrebovali v drugih primerih.

Pravzaprav imamo vse, kar potrebujemo za ustvarjanje priljubljenega vzorca razširljivih plošč:

Kopljemo še globlje

Ali ste opazili, da je naš faktor lestvice lahko manjši od 1? Določimo lahko, da je velikost lebdeče slike manjša od --h or --w vendar se slika poveča, ko lebdimo.

Začetna velikost mrežne celice je enaka --w in --h, zakaj torej celico mreže tvorijo manjše vrednosti večji? Ali celica ne bi smela dobiti manj, ali vsaj ohraniti prvotno velikost? In kakšna je končna velikost mrežne celice?

Moramo se poglobiti v to, kako algoritem CSS Grid izračuna velikost mrežnih celic. In to vključuje razumevanje privzetih vrednosti mreže CSS raztegnjena poravnava.

Tukaj je primer za razumevanje logike.

Na levi strani predstavitve sem določil dva stolpca z auto premer. Dobimo intuitiven rezultat: dva enaka stolpca (in dve enaki celici mreže). Toda mreža, ki sem jo nastavil na desni strani predstavitve, kjer posodabljam poravnavo z uporabo place-content: start, zdi se, da nima ničesar.

DevTools nam pomaga pokazati, kaj se v resnici dogaja v obeh primerih:

V drugi mreži imamo dva stolpca, vendar sta njuni širini enaki nič, tako da dobimo dve celici mreže, ki sta strnjeni v zgornjem levem kotu vsebnika mreže. To je ne napaka, ampak logičen rezultat poravnave mreže. Ko stolpcu (ali vrstici) določimo velikost z auto, to pomeni, da njegova vsebina narekuje njegovo velikost — vendar imamo prazno div brez vsebine, ki bi ji naredila prostor.

Ampak od takrat stretch je privzeta poravnava in imamo dovolj prostora znotraj naše mreže, bo brskalnik enakomerno raztegnil obe mrežni celici, da bo pokril celotno to območje. Tako se mreža na levi zavije z dvema enakima stolpcema.

od specifikacijo:

Upoštevajte, da nekatere vrednosti justify-content in align-content lahko povzroči razmak med tiri (space-around, space-between, space-evenly) ali spremeniti velikost (stretch).

Upoštevajte "spremenjeno velikost", ki je tu ključna. V zadnjem primeru sem uporabil place-content kar je okrajšava za justify-content in align-content

In to je nekje zakopano algoritem za določanje velikosti mreže očala:

Ta korak razširi skladbe, ki imajo avto funkcija maksimalne velikosti sledi z deljenjem morebitnega preostalega pozitivnega, dokončno prostega prostora med njimi enako. Če je prosti prostor nedoločen čas, Vendar mrežni vsebnik ima določeno najmanjša širina/višina, uporabite to velikost za izračun prostega prostora za ta korak.

"Enako" pojasnjuje, zakaj imamo enake celice mreže, vendar velja za "prosti prostor", ki je zelo pomemben.

Vzemimo prejšnji primer in dodamo vsebino enemu od divs:

Dodali smo kvadrat 50px slika. Tukaj je ilustracija, kako se vsaka mreža v našem primeru odziva na to sliko:

V prvem primeru lahko vidimo, da je prva celica (rdeča) večja od druge (modre). V drugem primeru se velikost prve celice spremeni tako, da ustreza fizični velikosti slike, medtem ko druga celica ostane brez dimenzij. Prosti prostor je enakomerno razdeljen, vendar ima prva celica več vsebine, zaradi česar je večja.

To je matematika za izračun našega prostega prostora:

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

Deljeno z dvema - številom stolpcev - dobimo širino 72.5px za vsak stolpec. Vendar dodamo velikost slike, 50px, v prvi stolpec, ki nam pusti en stolpec pri 122.5px in drugi enak 72.5px.

Enaka logika velja za našo mrežo slik. Vse slike so enake velikosti 0 (brez vsebine), medtem ko lebdeča slika prispeva k velikosti — tudi če je le 1px — zaradi česar je njegova mrežna celica večja od drugih. Iz tega razloga je lahko faktor lestvice katera koli vrednost, večja od 0 celo decimalk med 0 in 1.

Da bi dobili končno širino mrežnih celic, naredimo enak izračun, da dobimo naslednje:

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

Širina posode je določena z:

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

... in vse vrzeli so enake:

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

... in za lebdečo sliko imamo:

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

Vse to lahko izračunamo z našimi spremenljivkami:

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

Število stolpcev je določeno z --m , zato ta prosti prostor enakomerno razdelimo, da dobimo:

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

... kar nam daje velikost nelebdečih slik. Za lebdeče slike imamo to:

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

Če želimo nadzorovati končno velikost lebdeče slike, upoštevamo zgornjo formulo, da dobimo točno želeno velikost. Če na primer želimo, da je slika dvakrat večja:

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

Torej, vrednost našega množitelja obsega, --f, mora biti enako:

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

Za tri stolpce bomo imeli 3/2 = 1.5 in to je faktor lestvice, ki sem ga uporabil v prvi predstavitvi tega članka, ker sem želel narediti dvakrat večjo sliko ob lebdenju!

Ista logika velja za izračun višine in v primeru, da želimo oba nadzorovati neodvisno, bomo morali upoštevati dva faktorja merila, da zagotovimo določeno širino in višino pri lebdenju.

.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));
}

Zdaj poznate vse skrivnosti za ustvarjanje kakršne koli slikovne mreže s kul učinkom lebdenja, hkrati pa imate nadzor nad želeno velikostjo z uporabo matematike, ki smo jo pravkar obravnavali.

Zavijanje

V moji zadnji članeksmo ustvarili zapleteno mrežo z nekaj vrsticami CSS, ki omogoča uporabo implicitne mreže CSS Grid in funkcij samodejne umestitve. V tem članku smo se zanašali na nekatere zvijače z določanjem velikosti mreže CSS, da smo ustvarili domišljijsko mrežo slik, ki se pri lebdenju povečajo in povzročijo ustrezno prilagoditev mreže. Vse to s poenostavljeno kodo, ki jo je enostavno prilagoditi s spremenljivkami CSS!

V naslednjem članku se bomo igrali z oblikami! Mrežo CSS bomo združili z masko in potjo izrezka, da bomo dobili modno mrežo slik.