Kuvien zoomaus ruudukkoasettelussa

Kuvien ruudukon luominen on helppoa CSS Gridin ansiosta. Mutta ruudukon saaminen tekemään hienoja asioita jälkeen sijoitettujen kuvien saaminen pois voi olla hankalaa.

Sano, että haluat lisätä kuviin hienon hover-tehosteen, jossa ne kasvavat, ja zoomata niiden rivien ja sarakkeiden ulkopuolelle, joissa ne sijaitsevat? Me voimme tehdä tuon!

Siistiä, eikö? Jos tarkistat koodin, et löydä JavaScriptiä, monimutkaisia ​​valitsimia tai edes maagisia numeroita. Ja tämä on vain yksi esimerkki monista, joita tutkimme!

Verkon rakentaminen

HTML-koodi ruudukon luomiseksi on yhtä yksinkertainen kuin säilön kuvien luettelo. Emme tarvitse sen enempää.

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

CSS:ssä aloitamme asettamalla ruudukon seuraavasti:

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

Lyhyesti sanottuna meillä on kaksi muuttujaa, toinen, joka ohjaa kuvien kokoa ja toinen, joka määrittää kuvien välisen aukon koon. aspect-ratio auttaa pitämään asiat oikeassa suhteessa.

Saatat ihmetellä, miksi määrittelemme vain kolme saraketta, mutta emme rivejä. Ei, en unohtanut rivejä – meidän ei vain tarvitse määrittää niitä erikseen. CSS Grid pystyy sijoittamaan kohteet automaattisesti implisiittisiä rivejä ja sarakkeita, mikä tarkoittaa, että saamme niin monta riviä kuin tarvitaan mihin tahansa määrään kuvia, joita heitämme siihen. Voimme määrittää rivit sen sijaan eksplisiittisesti, mutta meidän on lisättävä grid-auto-flow: column varmistaaksemme, että selain luo tarvittavat sarakkeet puolestamme.

Tässä on esimerkki molempien tapausten havainnollistamiseksi. Erona on, että yksi virtaa a row suunta ja toinen a column suuntaan.

Tarkista tämä toinen kirjoittamani artikkeli saadaksesi lisätietoja implisiittisistä ruudukoista ja automaattisesta sijoittelusta.

Nyt kun meillä on ruudukko, on aika muotoilla kuvat:

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

Hover-tehoste, jota teemme, perustuu tähän CSS:ään. Luultavasti näyttää sinusta oudolta, että teemme kuvia, joilla ei ole leveyttä tai korkeutta, mutta joiden vähimmäisleveys ja -korkeus on 100 %. Mutta näet, että se on melko siisti temppu sille, mitä yritämme saavuttaa.

Kerron selaimelle, että kuvien tulee olla 0 leveys ja korkeus, mutta myös vähimmäiskorkeuden on oltava yhtä suuri kuin 100%… mutta 100% mistä? Prosentteja käytettäessä arvo on suhteessa johonkin muuhun. Tässä tapauksessa kuvamme sijoitetaan a:n sisään ruudukon solu ja meidän on tiedettävä koko tietääksemme, mikä se on 100% on suhteessa.

Selain jättää ensin huomioimatta min-height: 100% ruudukon solujen koon laskemiseen, mutta se käyttää height: 0 sen laskelmassa. Tämä tarkoittaa, että kuvamme eivät vaikuta ruudukon solujen kokoon… koska niillä ei teknisesti ole fyysistä kokoa. Tämä johtaa kolmeen yhtä suureen sarakkeeseen ja riviin, jotka perustuvat ruudukon kokoon (jonka määritimme .galleryn leveys ja aspect-ratio). Kunkin ruudukon solun korkeus on vain muuttuja --s määritimme (sama leveydelle).

Nyt kun meillä on ruudukon solujen mitat, selain käyttää niitä min-height: 100% (Ja min-width: 100%), joka pakottaa kuvat täyttämään täysin jokaisen ruudukon solun tilan. Koko asia saattaa näyttää hieman hämmentävältä, mutta pääideana on varmistaa, että ruudukko määrittää kuvien koon eikä päinvastoin. En halua kuvan määrittävän ruudukon kokoa ja ymmärrät miksi, kun olet lisännyt hover-tehosteen.

Hover-efektin luominen

Meidän on lisättävä kuvien mittakaavaa, kun niitä pidetään. Voimme tehdä sen muokkaamalla kuvaa width ja 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));
}

Lisäsin uuden mukautetun muuttujan, --f, sekoitukseen skaalaustekijänä koon ohjaamiseksi. Huomaa, kuinka kerron kokomuuttujan, --s, sen avulla laskea uusi kuvakoko.

Mutta sanoit, että kuvan koon on oltava 0. Mitä tapahtuu? Olen eksyksissä…

Se, mitä sanoin, on edelleen totta, mutta teen poikkeuksen leijutun kuvan osalta. Kerron selaimelle, että vain yhden kuvan koko ei ole yhtä suuri kuin nolla – joten se vaikuttaa ruudukon kokoon – kun taas kaikki muut pysyvät samankokoisina 0.

Vasen puoli näyttää ruudukon luonnollisessa tilassaan ilman leijuvia kuvia, mikä on oikea puoli. Kaikki vasemmalla puolella olevat ruudukon solut ovat samankokoisia, koska kaikilla kuvilla ei ole fyysisiä mittoja.

Oikealla puolella ensimmäisen rivin toinen kuva on päällä, mikä antaa sille mitat, jotka vaikuttavat ruudukon solun kokoon. Selain tekee siitä tietyn ruudukon solun isommaksi, kun hiiri pidetään, mikä vaikuttaa kokonaiskoon. Ja koska koko ruudukon koko on asetettu (koska asetamme kiinteän width på den .gallery), muut ruudukon solut vastaavat loogisesti pienentymällä pitääkseen .galleryn kokonaiskoko tahdikkuudessa.

Se on zoomaustehostemme toiminnassa! Vain yhden kuvan kokoa suurentamalla vaikutamme koko ruudukkokonfiguraatioon, ja sanoimme aiemmin, että ruudukko määrittelee kuvien koon niin, että jokainen kuva venyy ruudukkosolunsa sisällä täyttämään koko tilan.

Tähän lisäämme ripauksen transition Ja käyttää object-fit kuvan vääristymisen välttämiseksi ja illuusio on täydellinen!

Tiedän, että tempun takana olevaa logiikkaa ei ole helppo käsittää. Älä huoli, jos et ymmärrä sitä täysin. Tärkeintä on ymmärtää käytetyn koodin rakenne ja miten sitä muokataan, jotta saadaan lisää muunnelmia. Näin teemme seuraavaksi!

Lisää kuvia

Loimme 3×3 ruudukon selittääksemme päätempun, mutta olet varmaan arvannut, että meidän ei tarvitse pysähtyä tähän. Voimme tehdä sarakkeiden ja rivien lukumäärän muuttujiksi ja lisätä niin monta kuvaa kuin haluamme.

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

Meillä on kaksi uutta muuttujaa rivien ja sarakkeiden lukumäärälle. Sitten yksinkertaisesti määritämme ruudukon leveyden ja korkeuden niiden avulla. Samaa varten grid-template-columns joka käyttää --m muuttuja. Ja aivan kuten ennenkin, meidän ei tarvitse erikseen määritellä rivejä, koska CSS Gridin automaattinen sijoittelutoiminto tekee työn puolestamme riippumatta siitä, kuinka monta kuvaelementtiä käytämme.

Miksei leveydelle ja korkeudelle eri arvoja? Me voimme tehdä tuon:

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

Vaihdamme --s kahdella muuttujalla, yksi leveydelle, --w, ja toinen korkeudelle, --h. Sitten säädämme kaiken muun vastaavasti.

Joten aloitimme ruudukolla, jossa oli kiinteä koko ja määrä elementtejä, mutta sitten teimme uuden joukon muuttujia saadaksemme haluamasi konfiguraation. Meidän tarvitsee vain lisätä niin monta kuvaa kuin haluamme ja säätää CSS-muuttujia vastaavasti. Yhdistelmät ovat rajattomat!

Koko näytön kuvagalleria

Entä koko näytön versio? Kyllä sekin on mahdollista. Tarvitsemme vain tietää, mitä arvoja meidän on annettava muuttujillemme. Jos haluamme N kuvarivejä ja haluamme ruudukon olevan koko näytön kokoinen, meidän on ensin ratkaistava korkeus 100vh:

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

Sama logiikka leveydelle, mutta käyttämällä vw sijasta vh:

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

Teemme laskelman saadaksemme:

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

Valmis!

Se on täsmälleen sama HTML, mutta päivitetyillä muuttujilla, jotka muuttavat ruudukon kokoa ja käyttäytymistä.

Huomaa, että olen jättänyt pois kaavan, jonka aiemmin asetimme .galleryn width ja height ja korvasi ne 100vw ja 100vh, vastaavasti. Kaava antaa meille saman tuloksen, mutta koska tiedämme, mitä arvoa haluamme, voimme jättää kaiken tuon monimutkaisen.

Voimme myös yksinkertaistaa --h ja --w poistamalla aukko yhtälöstä tämän hyväksi:

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

Tämä saa leijutun kuvan kasvamaan hieman enemmän kuin edellisessä esimerkissä, mutta se ei ole iso juttu, koska voimme hallita mittakaavaa --f muuttuja, jota käytämme kertoimena.

Ja koska muuttujia käytetään yhdessä paikassa, voimme silti yksinkertaistaa koodia poistamalla ne kokonaan:

On tärkeää huomata, että tämä optimointi koskee vain koko näytön esimerkkiä, ei käsittelemiämme esimerkkejä. Tämä esimerkki on erityinen tapaus, jossa voimme tehdä koodista kevyemmän poistamalla osan monimutkaisista laskentatöistä, joita tarvitsimme muissa esimerkeissä.

Meillä on itse asiassa kaikki mitä tarvitsemme suositun laajenevien paneelien mallin luomiseen:

Kaivetaan vielä syvemmälle

Huomasitko, että mittakaavamme voi olla pienempi kuin 1? Voimme määrittää leijuttavan kuvan koon pienemmäksi kuin --h or --w mutta kuva kasvaa leijuttaessa.

Alkuperäinen ruudukon solukoko on yhtä suuri kuin --w ja --h, joten miksi pienemmät arvot muodostavat ruudukon solun suurempi? Eikö solun pitäisi saada pienempiä, tai ainakin säilyttää alkuperäisen kokonsa? Ja mikä on ruudukon solun lopullinen koko?

Meidän täytyy kaivaa syvemmälle siihen, kuinka CSS Grid -algoritmi laskee ruudukon solujen koon. Ja tämä edellyttää CSS Gridin oletusarvon ymmärtämistä venytyslinjaus.

Tässä on esimerkki logiikan ymmärtämiseksi.

Demon vasemmalla puolella määritin kahden sarakkeen kanssa auto leveys. Saamme intuitiivisen tuloksen: kaksi yhtä suurta saraketta (ja kaksi samanlaista ruudukon solua). Mutta ruudukon asensin demon oikealle puolelle, jossa päivitän kohdistusta käyttämällä place-content: start, ei näytä olevan mitään.

DevTools auttaa näyttämään meille, mitä todella tapahtuu molemmissa tapauksissa:

Toisessa ruudukossa meillä on kaksi saraketta, mutta niiden leveys on nolla, joten saamme kaksi ruudukkosolua, jotka on tiivistetty ruudukon säiliön vasempaan yläkulmaan. Tämä on emme virhe, mutta looginen tulos ruudukon kohdistuksesta. Kun mittaamme sarakkeen (tai rivin) kanssa auto, se tarkoittaa, että sen sisältö sanelee sen koon - mutta meillä on tyhjä div ilman sisältöä, jolle tilaa.

Mutta siitä lähtien stretch on oletuskohdistus ja meillä on tarpeeksi tilaa ruudukossamme, selain venyttää molempia ruudukon soluja tasaisesti kattamaan koko alueen. Näin vasemmalla oleva ruudukko päättyy kahdella yhtä suurella sarakkeella.

alkaen eritelmä:

Huomaa, että tietyt arvot justify-content ja align-content voi aiheuttaa raidat erilleen toisistaan ​​(space-around, space-between, space-evenly) tai kokoa muutettava (stretch).

Huomaa "muokattava koko", joka on avain tässä. Viimeisessä esimerkissä käytin place-content joka on lyhenne justify-content ja align-content

Ja tämä on haudattu jonnekin Grid Sizing -algoritmi silmälasit:

Tämä vaihe laajentaa raidat, joissa on auto max raidan koon toiminto jakamalla jäljellä olevat positiiviset, selvä vapaa tila yhtäläisesti heidän joukossaan. Jos vapaata tilaa on epämääräinen, Mutta verkkosäiliö on varma min-leveys/korkeus, käytä tätä kokoa tämän vaiheen vapaan tilan laskemiseen.

"Tasaisesti" selittää, miksi päädymme samaan ruudukon soluun, mutta se koskee "vapaata tilaa", mikä on erittäin tärkeää.

Otetaan edellinen esimerkki ja lisätään sisältöä johonkin divs:

Lisäsimme neliön 50px kuva. Tässä on esimerkki siitä, kuinka kukin esimerkkimme ruudukko reagoi kyseiseen kuvaan:

Ensimmäisessä tapauksessa voimme nähdä, että ensimmäinen solu (punainen) on suurempi kuin toinen (sininen). Toisessa tapauksessa ensimmäisen solun koko muuttuu sopimaan kuvan fyysiseen kokoon, kun taas toinen solu jää ilman mittoja. Vapaa tila jaetaan tasan, mutta ensimmäisessä solussa on enemmän sisältöä, mikä tekee siitä isomman.

Tämä on matematiikka vapaan tilamme selvittämiseksi:

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

Jaettuna kahdella - sarakkeiden lukumäärällä - saadaan leveys 72.5px jokaiselle sarakkeelle. Mutta lisäämme kuvan koon, 50px, ensimmäiseen sarakkeeseen, joka jättää meille yhden sarakkeen osoitteessa 122.5px ja toinen yhtä suuri 72.5px.

Sama logiikka pätee kuvaruudukkoon. Kaikkien kuvien koko on yhtä suuri 0 (ei sisältöä), kun leijuva kuva vaikuttaa kokoon – vaikka se olisikin vain 1px - tekee sen ruudukkosolusta muita suurempia. Tästä syystä skaalaustekijä voi olla mikä tahansa arvo suurempi kuin 0 jopa desimaalien välillä 0 ja 1.

Saadaksemme ruudukon solujen lopullisen leveyden, teemme saman laskelman saadaksemme seuraavan:

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

Säiliön leveys määritellään seuraavasti:

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

…ja kaikki aukot ovat yhtä suuria kuin:

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

…ja leijutetulla kuvalla meillä on:

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

Voimme laskea kaiken tämän muuttujillamme:

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

Sarakkeiden lukumäärän määrittää --m , joten jaamme tämän vapaan tilan tasan saadaksemme:

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

…mikä antaa meille ei-hovered kuvien koon. Kohdistettuja kuvia varten meillä on tämä:

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

Jos haluamme hallita leijuttavan kuvan lopullista kokoa, harkitsemme yllä olevaa kaavaa saadaksemme tarkan haluamamme koon. Jos esimerkiksi haluamme kuvan olevan kaksi kertaa suurempi:

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

Joten, mittakaavakertoimemme arvo, --f, on oltava yhtä suuri kuin:

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

Meillä on kolme saraketta 3/2 = 1.5 ja tämä on skaalaustekijä, jota käytin tämän artikkelin ensimmäisessä esittelyssä, koska halusin tehdä kuvasta kaksi kertaa isomman leijuessa!

Sama logiikka pätee korkeuden laskemiseen, ja jos haluamme hallita molempia erikseen, meidän on otettava huomioon kaksi mittakaavatekijää varmistaaksemme, että meillä on tietty leveys ja korkeus.

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

Nyt tiedät kaikki salaisuudet luodaksesi minkä tahansa kuvaruudukon viileällä hover-tehosteella ja voit hallita haluamaasi kokoa juuri käsitellyn matematiikan avulla.

Käärimistä

Minun viimeinen artikkeli, loimme monimutkaisen näköisen ruudukon muutamalla CSS-rivillä, jotka hyödynsivät CSS Gridin implisiittistä ruudukkoa ja automaattisen sijoittelun ominaisuuksia. Tässä artikkelissa luotimme joihinkin CSS-ruudukon koon temppuihin luodaksemme hienon ruudukon kuvista, jotka zoomaavat hiirellä ja saavat ruudukon mukautumaan vastaavasti. Kaikki tämä yksinkertaistetulla koodilla, jota on helppo säätää CSS-muuttujien avulla!

Seuraavassa artikkelissa leikitään muodoilla! Yhdistämme CSS-ruudukon maskiin ja leikepolkuun saadaksemme upean kuvien ruudukon.