Seo conas íomhánna deartha sofhreagracha a chur leis an CSS
Féach ar láithreáin ghréasáin tóir inniu agus is éard atá i gceist le cóireáil dearaidh amháin a bhfuil tú cinnte go bhfeicfear íomhánna cúlra mór, scáileáin. Tagann ceann de na dúshláin a bhaineann leis na híomhánna seo a chur leis an gcleachtas is fearr a chaithfidh suíomhanna gréasáin a fhreagairt ar mhéideanna scáileáin agus ar fheistí éagsúla - cur chuige ar a dtugtar dearadh gréasáin freagrúil .
Ós rud é go bhfuil athruithe agus scálaí leagan amach do láithreán gréasáin le méideanna scáileáin éagsúla, ní mór na híomhánna cúlra sin a mhéid dá réir sin.
Go deimhin, tá na "íomhánna sreabhach" seo ar cheann de na príomh-phíosaí suíomhanna gréasáin sofhreagracha (chomh maith le greille sreabhán agus fiosruithe sna meáin). Bhí na trí phíosa seo ina stáplacha de dhearadh gréasáin sofhreagrach ó thús, ach cé go raibh sé éasca i gcónaí íomhánna inlíne freagracha a chur ar shuíomh (is iad na híomhánna inlíne na grafaicí atá códaithe mar chuid den mharcáil HTML), ag déanamh mar aon leis na híomhánna cúlra (atá styled isteach sa leathanach ag baint úsáide as maoine cúlra CSS) tá dúshlán suntasach déanta ag fada le go leor dearthóirí gréasáin agus forbróirí deireadh tosaigh. Go deimhin, rinne an maoin "mhéid cúlra" i CSS seo a dhéanamh.
In earra ar leithligh, chlúdaigh mé conas úsáid a bhaint as maoin chúlra CSS3 chun íomhánna a shíneadh a d'oirfeadh i bhfuinneog, ach tá bealach níos fearr agus níos úsáidí ann chun an mhaoin seo a úsáid. Chun seo a dhéanamh, úsáidfimid an meascán maoine agus luach seo a leanas:
méid cúlra: clúdach;
Insíonn an mhaoin eochairfhocal clúdaigh an bhrabhsálaí an íomhá a scála chun an fhuinneog a fheistiú, is cuma cé chomh mór nó a bheag a gheobhaidh an fhuinneog sin. Tá an íomhá scála chun an scáileán ar fad a chlúdach, ach coimeádtar na cóimheasa agus na cóimheasa gné slán ina iomláine, rud a chosc go gcuirfear an íomhá féin as a riocht.
Cuirtear an íomhá san fhuinneog chomh mór agus is féidir ionas go mbeidh an dromchla iomlán fuinneog clúdaithe. Ciallaíonn sé seo nach mbeidh aon spotaí bána ar do leathanach ná aon saobhadh ar an íomhá, ach ciallaíonn sé freisin go bhféadfaí cuid den íomhá a chaitheamh ag brath ar chóimheas gné an scáileáin agus an íomhá atá i gceist. Mar shampla, féadfar imill íomhá (ceachtar barr, bun, clé nó ceart) a ghearradh ar na híomhánna, ag brath ar na luachanna a úsáideann tú le haghaidh an tsaoil chúlra. Má dhíríonn tú an cúlra "barr ar chlé", tiocfaidh aon bharrachas ar an íomhá ar na taobhanna bun agus ar dheis. Má lárionaíonn tú an íomhá cúlra, díreoidh an bhreis ar na taobhanna go léir, ach ós rud é go bhfuil an iomarca sin scaipeadh amach, ní bheidh an tionchar ar aon taobh amháin níos lú.
Conas a úsáid méid cúlra: clúdach;
Nuair a chruthaíonn tú d'íomhá cúlra, is maith an rud é íomhá a chruthú atá cothrom mór. Cé gur féidir le brabhsálaithe íomhá a dhéanamh níos lú gan tionchar suntasach a bheith aige ar chaighdeán an amhairc, nuair a scaoileann brabhsálaí íomhá ar mhéid níos mó ná na gnéithe bunaidh é, déanfar an caighdeán amhairc a dhíghrádú, ag éirí níos lú ná píopaí. Is é an rud is tábhachtaí ná seo go dtógann do leathanach buaic feidhmíochta nuair atá tú ag seachadadh íomhánna ollmhór chuig gach scáileán.
Nuair a dhéanann tú é seo, déan cinnte go ndéanfaidh tú na híomhánna sin a ullmhú i gceart chun luas a íoslódáil agus seachadadh gréasáin . Sa deireadh, ní mór duit an meán sona a aimsiú idir méid íomhá agus cáilíocht mór go leor agus méid comhaid réasúnta le haghaidh luasanna a íoslódáil.
Is é ceann de na bealaí coitianta chun íomhánna cúlra scála a úsáid nuair a theastaíonn uait an íomhá sin chun cúlra iomlán leathanach a fháil, cibé an bhfuil an leathanach sin leathan agus á bhreathnú ar ríomhaire deisce nó i bhfad níos lú agus go bhfuil sé á sheoladh chuig ríomhaire boise, soghluaiste feistí.
Uaslódáil do íomhá chuig do óstach gréasáin agus é a chur chuig do CSS mar íomhá cúlra:
background-image: url (tinte ealaíne-thar-wdw.jpg);
cúl-athuair: gan athuair;
suíomh cúlra: ionad lárionad;
cúlra-iatán: seasta;
Cuir an CSS brabhsálaí réamhshocraithe ar dtús:
-webkit-background-size: clúdach;
-moz-background-size: clúdach;
-o-background-size: clúdach;
Ansin cuir leis an maoin CSS:
méid cúlra: clúdach;
Ag baint úsáide as Íomhánna Difriúla a Dhéanann Gléasanna Éagsúla
Cé go bhfuil dearadh sofhreagrach ar dheasc nó ar ríomhaire glúine tábhachtach, tá méadú tagtha ar an éagsúlacht feistí a d'fhéadfadh teacht ar an nGréasán suntasach, agus tagann méideanna níos mó de scáileáin.
Mar a luadh cheana, tá íomhá cúlra sofhreagrach mór á luchtú ar fhón cliste, mar shampla, nach dearadh éifeachtach nó comhfhiosach ar bandaleithead é.
Foghlaim conas is féidir leat fiosruithe sna meáin a úsáid chun íomhánna a sheachadadh a bheidh oiriúnach do na feistí a chuirfear ar taispeáint orthu, agus feabhas a chur ar chomhoiriúnacht do láithreán gréasáin le feistí soghluaiste.
Airteagal bunaidh le Jennfier Krynin. Arna eagarthóireacht ag Jeremy Girard 12/12/17