HTML 5 pildiga adaptiivne ekraan img proportsionaalse skaleerimise kood veebilehe HTML XNUMX jaoks

Mobiilse Interneti õitsengu tõttuWechati turundusMobiiltelefonide populaarsus on muutunudElukohustuslik tööriist.

ehitada veebisaitmalli, on soovitatav kasutadaWordPressKohanduv teema:

Mida tähendab CSS-pildi adaptiivne?

CSS-pildi kohandamine tähendab piltide loomist HTML-i veebilehel CSS-koodi kaudu:

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

Mis vahe on CSS-i valijaklassil ja ID-l? ID ja klassi kasutamine HTML-is

Mis vahe on CSS-i valijaklassil ja ID-l? ID ja klassi kasutamine HTML-is Chen Weiliang teostab praegu SEO-d ja optimeerib veebisaidi WordPressi teemat.Kuigi olen varem õppinud HTML-i ja CSS-i põhiteadmisi, pole ma seda mõnda aega kasutanud, eriti CSS-i osa...

Kuidas kohandada lehte MP4-video esitamiseks mobiiliveebisaidil?Palun klõpsake allolevat linki ▼

Kuidas H5 veebileht MP4 kohandub lehega Mobiiliveebisait mängib video html koodi

Videoturundus on veebiturunduse lahutamatu osa: paljud veebireklaamide praktikud kasutavad liikluse suurendamiseks sageli videot koos viirusturundusega.Kui WeChat turundust kombineerida videoturundusega, võib see veelgi parandada uue meedia ja sotsiaalse e-kaubanduse tekstikirjutamise konversioonimäära.Mul on palju sõpru...