CSS-i tundlike piltide õpetus: kuidas muuta pildid CSS-iga reageerivateks

Enamik tänapäeva veebisaite on reageerivad. Ja kui peate sellel saidil pildi tsentreerima ja joondama, peate õppima, kuidas pilte CSS-i abil muuta voolavaks või reageerivaks.

Postitasin paar nädalat tagasi õppevideo, mis selgitab, kuidas samm-sammult samm-sammult reageerivat veebisaiti teha. Videos tegime pildi reageerivaks. Kuid selles postituses tahaksin anda natuke üksikasjalikumat teavet piltide reageerimisvõime muutmise kohta.

Samuti saate teada mõnedest üldistest probleemidest, mis võivad ilmneda siis, kui proovite muuta pildid tundlikuks - ja ma püüan selgitada, kuidas neid lahendada.

Kuidas muuta pildid CSS-iga reageerivaks

Kas peaksin kasutama suhtelisi või absoluutühikuid?

Kujutise muutmine või reageerimine on tegelikult üsna lihtne. Kui laadite pildi oma veebisaidile üles, on sellel vaikimisi laius ja kõrgus. CSS-iga saate neid mõlemaid muuta.

Kujutise tundlikuks muutmiseks peate selle laiuse atribuudile uue väärtuse andma. Seejärel reguleerib pildi kõrgus ennast automaatselt.

Oluline on teada, et laiuse atribuudi (näiteks protsent) jaoks peaksite alati kasutama suhtelisi ühikuid, mitte absoluutseid, nagu pikslid.

img { width: 500px; }

Näiteks kui määrate fikseeritud laiuse 500 pikslit, ei ole teie pilt tundlik - kuna ühik on absoluutne.

img { width: 50%; }

Sellepärast peaksite määrama suhtelise üksuse, näiteks 50%. See lähenemine muudab teie pildid sujuvaks ja nad saavad ekraani suurusest olenemata ise suurust muuta.

Kas peaksin kasutama meediumipäringuid?

Üks küsimus, mida mulle kõige rohkem esitatakse, on see, kas peaksite kasutama meediumipäringuid või mitte.

Meediumipäring on CSS-i teine ​​oluline funktsioon, mis aitab veebisaidi reageerida. Ma ei hakka siin rohkem üksikasjadesse laskuma, kuid meediumipäringute üksikasjalikuma kasutamise kohta saate hiljem lugeda mu teist postitust.

Vastus sellele küsimusele on: "see sõltub". Kui soovite, et teie pildil oleks ühest seadmest erinev suurus, peate kasutama meediumipäringuid. Muidu ei tee.

Selle näite jaoks on teie pildi 50% laius mis tahes ekraanil. Kuid kui soovite selle mobiilseadmete jaoks täissuuruses muuta, peate meediaküsimustes abi saama:

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

Nii et meediumipäringu reegli põhjal võtab iga seade, mis on väiksem kui 480 pikslit, ekraani laiuse täissuuruses.

Selle postituse videoversiooni saate vaadata ka allpool:

Miks pole maksimaalse laiusega omadus suurepärane?

Teine võimalus, kuidas arendajad saavad reageerivaid pilte teha, on omadus max-width. Kuid see pole alati parim meetod, mida kasutada, sest see ei pruugi töötada igat tüüpi ekraani suuruse või seadme puhul.

Esimene asi, mida enne näitega edasi liikumist tuleb mõista, on see, mida max-width omadus täpselt teeb.

Atribuut „max-width” määrab elemendile maksimaalse laiuse, mis ei võimalda selle elemendi laiust olla suurem kui maksimaalse laiuse väärtus (kuid see võib olla ka väiksem).

Näiteks kui pildi vaikelaius on 500 pikslit ja kui teie ekraanisuurus on ainult 360 pikslit, ei näe te kogu pilti, kuna ruumi pole piisavalt:

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

Seetõttu saate määratleda pildi jaoks maksimaalse laiuse atribuudi ja seada sellele 100%, mis kahandab 500 pikslist pilti 360 piksliseks. Nii näete kogu pilti väiksema suurusega ekraanil.

Hea on see, et kuna kasutate suhtelist üksust, on pilt sujuv igas seadmes, mis on väiksem kui 500 pikslit.

Kahjuks muutub ekraani suurus mõnevõrra suuremaks kui 500 pikslit, kuid pilt ei muutu, kuna selle laius on vaikimisi 500 pikslit. See lähenemine rikub pildi reageerimisvõimet.

Selle parandamiseks peate uuesti kasutama atribuuti width (laius), mis muudab maksimaalse laiuse atribuudi kasutuks.

Aga kõrgused?

Teine levinud probleem, millega võite kokku puutuda, on seotud kõrguse omadusega. Tavaliselt suurendab pildi kõrgus automaatselt iseennast, nii et te ei pea oma piltidele määrama kõrguse omadust (kuna see lõhub pilti).

Kuid mõnel juhul peate võib-olla töötama piltidega, mille kõrgus peab olema kindel. Nii et kui määrate pildile kindla kõrguse, on see endiselt tundlik, kuid ei näe hea välja.

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

Õnneks on CSS selle probleemi lahendamiseks veel üks vara ...

Lahendus: objektile sobiv omadus

Piltide paremaks kontrollimiseks pakub CSS veel ühe atribuudi nimega object-fit. Kasutame omadust object-fit ja määrame väärtuse, mis muudab teie pildi paremaks:

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

Vajadusel saate pildi kindlale osale keskendumiseks kasutada ka objekti-positsiooni atribuuti (lisaks objekti sobivusele). Paljud inimesed pole objektile sobivast omadusest teadlikud, kuid see võib olla kasulik sellist tüüpi probleemide lahendamiseks.

Loodan, et see postitus on aidanud teil reageerivate piltidega oma probleeme mõista ja lahendada. Kui soovite veebiarenduse kohta rohkem teada saada, vaadake julgelt minu Youtube'i kanalit.

Aitäh, et lugesid!