HTML 5 image schermu adattativu img codice di scala proporzionale per a pagina web HTML XNUMX

A causa di u boom di Internet mobile,Marketing WechatA popularità di i telefunini mobile hè diventataA vitastrumentu must-have.

custruisce un situ webmudellu, hè cunsigliatu à adupràWordPressTema adattatu per:

Chì significà l'adattazione di l'imagine CSS?

L'autoadattazione di l'imagine CSS si riferisce à fà l'imaghjini in a pagina web html, attraversu u codice CSS:

In seguitu,Chen WeiliangAghju sparte cun voi u codice di scala proporzionale img CSS ^_^

L'altezza di l'immagine CSS è u codice adattativu di larghezza

Inserisce l'imagine in html:

Se vulete chì l'imaghjini si adatti à a piccula dimensione di u screnu invece di stà fissu in larghezza è altezza.

Pudete aghjunghje u seguente codice à u schedariu style.css di u vostru tema WordPress ▼

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

dichjarazione quìmax-widthregula di larghezza massima

• per assicurà chì tutte l'imaghjini sò visualizati à u massimu di 100% (vale à dì, ponu esse visualizati solu quant'è e so propria imagine).
• À questu puntu, se l'elementu chì cuntene l'imaghjini (per esempiu, u corpu o div chì cuntene l'imaghjini) hè più chjucu cà a larghezza inherente di l'imaghjini, l'imaghjini serà scalatu per riempie u massimu spaziu dispunibule.

width:auto;significa larghezza automatica

\9 Hè un modu di scrive hack css.

• In questu modu, "\9" hè aghjuntu à u codice css normale, solu u navigatore IE pò ricunnosce, altri navigatori ignuranu sta dichjarazione.
• Questu uttene a differenziazione di u navigatore, chì permette u scopu di i navigatori compatibili.

Perchè ùn aduprà larghezza: 100%?

Per ottene una scala automatica di l'imaghjini, pudete puru aduprà e proprietà di larghezza più cumunimenti utilizati, per esempiu.width：100％.

Tuttavia, sta regula ùn hè micca applicata quì.

• Perchè sta regula farà chì pareva cum'è u so cuntainer.
• In i casi induve u cuntinuu hè assai più largu di l'imaghjini, l'imaghjini serà allungatu inutilmente.

Precauzioni

Chì sò i selettori CSS? Chì ghjè a diffarenza trà class è id?I seguenti tutoriali parlanu di ▼

Chì ghjè a diffarenza trà a classa di selettore CSS è l'id? id è usu di classi in HTML

Chì ghjè a diffarenza trà a classa di selettore CSS è l'id? L'usu di l'id è a classa in HTML Chen Weiliang hè attualmente realizatu SEO è ottimisimu u tema WordPress di u situ web.Ancu s'è aghju amparatu qualchì cunniscenza di basa HTML è CSS prima, ma ùn l'aghju micca operatu per un tempu, in particulare a parte CSS ...

Cumu u situ web mobile riproduce video MP4 adattatu à a pagina?Per piacè cliccate nantu à u ligame sottu ▼

Cumu si adatta a pagina web H5 MP4 à a pagina? U situ web mobile riproduce u codice html video

U marketing video hè una parte integrante di u marketing online: assai prufessiunali di prumuzione in linea spessu usanu video cumminati cù "marketing virali" per guidà u trafficu.Se u marketing WeChat hè cumminatu cù u marketing video, pò ancu migliurà a taxa di cunversione di scrittura di i novi media è di e-commerce suciale.Aghju parechji amichi...