Artiklite kataloog
Mobiilse Interneti õitsengu tõttuWechati turundusMobiiltelefonide populaarsus on muutunudElukohustuslik tööriist.
ehitada veebisaitmalli, on soovitatav kasutadaWordPressKohanduv teema:
- Kui WordPressi teemaarendaja ei teinud WordPressi teemalehe kujundamisel HTML 5 pildiga kohandatavat ekraani hästi...
- Mobiilseadmes veebilehte sirvides tekib väga inetu pildiviga ning kasutajakogemus on äärmiselt kehv!
Mida tähendab CSS-pildi adaptiivne?
CSS-pildi kohandamine tähendab piltide loomist HTML-i veebilehel CSS-koodi kaudu:
- Kohandub automaatselt erinevate seadmete laiuse ja kõrgusega.
- Img-märgend skaleeritakse automaatselt proportsionaalselt.
JärgmineChen WeiliangJagan teiega CSS img proportsionaalse skaleerimise koodi ^_^
CSS-pildi kõrguse ja laiuse kohanduv kood
Sisesta pilt html-i:
Kui soovite, et pilt kohaneks ekraani väikese suurusega, mitte ei jääks laiuse ja kõrgusega fikseerituks.
Saate lisada järgmise koodi oma WordPressi teema faili style.css ▼
/*图片自适应宽度和高度*/
img { max-width: 100%; height: auto; width: auto\9; width: auto; }avaldus siinmax-widthmaksimaalse laiuse reegel
- tagamaks, et kõiki pilte kuvatakse maksimaalselt 100% (st neid saab kuvada ainult nii suurena kui nende enda pildid).
- Kui pilti sisaldav element (nt pilti sisaldav keha või div) on sel hetkel väiksem kui pildi omane laius, skaleeritakse kujutist nii, et see täidaks maksimaalselt saadaoleva ruumi.
width:auto;tähendab automaatset laiust
\9 See on häkkimise css-i kirjutamise viis.
- Sel moel lisatakse tavalisele css-koodile "\9", ainult IE brauser tunneb selle ära, teised brauserid ignoreerivad seda väidet.
- See saavutab brauserite eristamise, võimaldades ühilduvate brauserite eesmärki.
Miks mitte kasutada laiust: 100%?
Piltide automaatse skaleerimise saavutamiseks saab kasutada ka sagedamini kasutatavaid laiuse omadusi, nt.width：100％.
Siin see reegel aga ei kehti.
- Kuna see reegel muudab selle sama laiaks kui selle konteiner.
- Juhtudel, kui konteiner on pildist palju laiem, venitatakse pilti asjatult.
注意 事项
Mis on CSS-i valijad? Mis vahe on klassil ja ID-l?Järgmised õpetused räägivad ▼-st
Kuidas kohandada lehte MP4-video esitamiseks mobiiliveebisaidil?Palun klõpsake allolevat linki ▼
Hope Chen Weiliangi ajaveeb ( https://www.chenweiliang.com/ ) jagatud "Web page HTML 5 image adaptive screen img proportsionaalse skaleerimise koodi", mis on teile abiks.
Tere tulemast selle artikli linki jagama:https://www.chenweiliang.com/cwl-964.html