HTML 5 image adaptive screen img proportional scaling code for webpage HTML XNUMX

Noho ny firoboroboan'ny Internet finday,Wechat marketingLasa ny lazan'ny findayfiainanafitaovana tsy maintsy ananana.

manangana tranonkalamodely, dia soso-kevitra ny hampiasaWordPressLohahevitra adaptive ho an'ny:

Inona no dikan'ny CSS image adaptive?

Ny fampifanarahana-tena amin'ny sary CSS dia manondro ny fanaovana ireo sary ao amin'ny pejin-tranonkala html, amin'ny alàlan'ny kaody CSS:

Manaraka,Chen WeiliangHozaraiko aminao ny code scaling proportional CSS img ^_^

CSS ny haavon'ny sary sy ny sakany adaptive code

Ampidiro ao amin'ny html ny sary:

Raha tianao ny sary hifanaraka amin'ny habe kely amin'ny efijery fa tsy mijanona amin'ny sakany sy ny haavony.

Azonao atao ny manampy ity kaody manaraka ity amin'ny rakitra style.css amin'ny lohahevitra WordPress anao ▼

/*图片自适应宽度和高度*/ 
img { max-width: 100%; height: auto; width: auto\9; width: auto; }

fanambarana etomax-widthfitsipika sakany ambony indrindra

• mba hahazoana antoka fa ny sary rehetra dia aseho amin'ny 100% ambony indrindra (izany hoe tsy azo aseho amin'ny sariny manokana ihany).
• Amin'izao fotoana izao, raha kely kokoa noho ny sakan'ny sary ny singa misy ny sary (ohatra, ny vatana na ny div misy ny sary), dia hosorina ny sary mba hamenoana ny habaka malalaka indrindra.

width:auto;midika hoe sakany mandeha ho azy

\9 Izy io dia fomba fanoratana hack css.

• Amin'izany fomba izany, "\9" dia ampiana amin'ny kaody css mahazatra, ny navigateur IE ihany no afaka mahafantatra izany, ny navigateur hafa dia tsy miraharaha an'io fanambarana io.
• Izany dia hahatratra ny fanavahana ny navigateur, ahafahan'ny navigateur mifanentana.

Nahoana no tsy mampiasa sakany: 100%?

Mba hahazoana scaling mandeha ho azy amin'ny sary, azonao atao koa ny mampiasa ireo toetra sakany ampiasaina matetika kokoa, ohatra.width：100％.

Tsy mihatra eto anefa io fitsipika io.

• Satria io fitsipika io dia hahatonga azy ho malalaka tahaka ny fitoerany.
• Amin'ny tranga izay midadasika kokoa noho ny sary ny fitoeran-javatra, ny sary dia mihinjitra tsy ilaina.

fepetra

Inona no atao hoe CSS selectors? Inona no maha samy hafa ny kilasy sy id?Miresaka momba ny ▼ ireto fampianarana manaraka ireto

Inona no maha samy hafa ny CSS selector class sy id? id sy ny fampiasana kilasy amin'ny HTML

Inona no maha samy hafa ny CSS selector class sy id? Ny fampiasana id sy kilasy amin'ny HTML Chen Weiliang dia manao SEO amin'izao fotoana izao ary manatsara ny lohahevitry ny WordPress amin'ny tranokala.Na dia efa nianatra fahalalana fototra momba ny HTML sy CSS aza aho taloha, fa efa elaela ihany no tsy niasako, indrindra ny ampahany CSS...

Ahoana no hampifanaraka ny pejy hilalao MP4 video amin'ny finday tranonkala?Kitiho azafady ny rohy eto ambany ▼

Ahoana ny fampifanarahana ny pejy MP5 H4 amin'ny pejy?

Ny marketing amin'ny horonan-tsary dia ampahany manan-danja amin'ny varotra an-tserasera: maro ny mpanao fampiroboroboana an-tserasera matetika no mampiasa horonan-tsary miaraka amin'ny "marketing viral" mba hampandeha ny fifamoivoizana.Raha ampifandraisina amin'ny marketing video ny WeChat marketing, dia afaka manatsara kokoa ny tahan'ny fiovam-po amin'ny copywriting amin'ny media vaovao sy ny e-varotra ara-tsosialy.Manana namana maro aho...