CSS: n reagoivan kuvan opetusohjelma: Kuinka saada kuvat reagoiviksi CSS: n avulla

Suurin osa nykypäivän verkkosivustoista on reagoivia. Ja jos sinun on keskitettävä ja kohdistettava kuva kyseiselle sivustolle, sinun on opittava, kuinka tehdä kuvista sujuvia tai reagoivia CSS: n kanssa.

Lähetin opetusvideon, joka selittää kuinka tehdä reagoiva verkkosivusto vaihe vaiheelta pari viikkoa sitten. Videossa teimme kuvan reagoivaksi. Mutta tässä viestissä haluaisin antaa hieman yksityiskohtaisempaa tietoa kuvien herkkyydestä.

Opit myös joitain yleisiä ongelmia, joita voi ilmetä, kun yrität tehdä kuvista reagoivia - ja yritän selittää, miten ne voidaan ratkaista.

Kuinka saada kuvat reagoiviksi CSS: n avulla

Pitäisikö minun käyttää suhteellisia vai absoluuttisia yksiköitä?

Kuvan muuttaminen tai reagointi on todella yksinkertaista. Kun lataat kuvan verkkosivustollesi, sen oletusleveys ja korkeus ovat oletusarvoisesti. Voit muuttaa niitä molempia CSS: llä.

Jotta kuva olisi herkkä, sinun on annettava uusi arvo sen leveysominaisuudelle. Sitten kuvan korkeus säätyy automaattisesti.

Tärkeää on tietää, että leveysominaisuudelle, kuten prosenttiosuudelle, on aina käytettävä suhteellisia yksiköitä eikä absoluuttisia yksiköitä, kuten pikseleitä.

img { width: 500px; }

Jos esimerkiksi määrität kiinteän 500 kuvapisteen leveyden, kuvasi ei ole reagoiva - koska yksikkö on absoluuttinen.

img { width: 50%; }

Siksi sinun pitäisi sen sijaan määrittää suhteellinen yksikkö, kuten 50%. Tämä lähestymistapa tekee kuvistasi sujuvaa ja ne voivat muuttaa itseään koon mukaan näytön koosta riippumatta.

Pitäisikö minun käyttää mediakyselyjä?

Yksi kysymyksistä, joita minulle kysytään eniten, on sinun pitäisikö käyttää mediakyselyjä vai ei.

Mediakysely on toinen tärkeä CSS-ominaisuus, joka auttaa verkkosivustoa reagoimaan. En käsittele tarkempia yksityiskohtia täällä, mutta voit lukea toisen viestini myöhemmin oppiaksesi käyttämään mediakyselyjä tarkemmin.

Vastaus tähän kysymykseen on: "se riippuu". Jos haluat, että kuvasi on erikokoinen laitteesta toiseen, sinun on käytettävä mediakyselyjä. Muuten et.

Nyt tässä esimerkissä kuvasi leveys on 50% kaikentyyppisille näytöille. Mutta kun haluat tehdä siitä täysikokoisen mobiililaitteille, sinun on saatava apua mediakyselyistä:

@media only screen and (max-width: 480px) { img { width: 100%; } }

Joten mediakyselysäännön perusteella kaikki alle 480 kuvapisteen kokoiset laitteet ottavat koko näytön leveyden.

Voit myös katsoa videon version tästä viestistä alla:

Miksi suurin leveysominaisuus ei ole suuri?

Toinen tapa, jolla kehittäjät voivat tehdä reagoivia kuvia, on ominaisuus max-width. Tämä ei kuitenkaan ole aina paras tapa käyttää, koska se ei välttämättä toimi kaikentyyppisissä ruuduissa tai laitteissa.

Ensimmäinen asia, joka on ymmärrettävä ennen kuin siirrymme esimerkkiin, on se, mitä max-width-ominaisuus tarkalleen tekee.

Max-width -ominaisuus asettaa elementille enimmäisleveyden, joka ei salli kyseisen elementin leveyden olla suurempi kuin sen max-width-arvo (mutta se voi olla pienempi).

Jos kuvan oletusleveys on esimerkiksi 500 kuvapistettä ja jos näyttökokosi on vain 360 kuvapistettä, et näe koko kuvaa, koska tilaa ei ole tarpeeksi:

img { max-width: 100%; width: 500px; // assume this is the default size }

Siksi voit määrittää kuvalle maksimileveyden ominaisuuden ja asettaa sen arvoksi 100%, mikä kutistaa 500 kuvapisteen kuvan 360 kuvapisteen tilaksi. Joten voit nähdä koko kuvan pienemmällä näytöllä.

Hyvä asia on, että koska käytät suhteellista yksikköä, kuva on juokseva kaikissa laitteissa, joiden koko on pienempi kuin 500 kuvapistettä.

Valitettavasti näytön koko tulee jonkin verran suuremmaksi kuin 500 kuvapistettä, mutta kuva ei, koska sen oletusleveys on 500 kuvapistettä. Tämä lähestymistapa rikkoo kuvan herkkyyttä.

Korjataksesi tämän, sinun on käytettävä leveysominaisuutta uudelleen, mikä tekee maksimileveysominaisuudesta hyödytöntä.

Entä Heights?

Toinen yleinen ongelma, jonka saatat törmätä, liittyy korkeusominaisuuteen. Normaalisti kuvan korkeus muuttuu automaattisesti, joten sinun ei tarvitse määrittää korkeudelle omaisuutta kuviin (koska se rikkoo kuvan).

Joissakin tapauksissa saatat joutua työskentelemään kuvien kanssa, joiden korkeuden on oltava kiinteä. Joten kun määrität kuvalle kiinteän korkeuden, se on silti reagoiva, mutta se ei näytä hyvältä.

img { width: 100%; height: 300px; }

Onneksi CSS tarjoaa ongelman korjaamiseen toisen ominaisuuden…

Ratkaisu: Object-Fit -ominaisuus

Kuvien hallinnan parantamiseksi CSS tarjoaa toisen ominaisuuden, jota kutsutaan object-fitiksi. Käytetään object-fit -ominaisuutta ja määritetään arvo, joka tekee kuvastasi paremman:

img { width: 100%; height: 300px; object-fit: cover; object-position: bottom; }

Tarvittaessa voit myös käyttää object-position-ominaisuutta (object-fit-ominaisuuden lisäksi) tarkentaaksesi kuvan tiettyyn osaan. Monet ihmiset eivät ole tietoisia esineeseen sopivasta ominaisuudesta, mutta voi olla hyödyllistä korjata tällaiset ongelmat.

Toivon, että tämä viesti on auttanut sinua ymmärtämään ja ratkaisemaan ongelmasi reagoivilla kuvilla. Jos haluat oppia lisää verkkokehityksestä, tutustu Youtube-kanavaani.

Kiitos, että luit!