Pantalla adaptativa d'imatge HTML 5 img codi d'escala proporcional per a la pàgina web HTML XNUMX

A causa de l'auge d'Internet mòbil,Màrqueting de WechatLa popularitat dels telèfons mòbils ha esdevingutLa vidaeina imprescindible.

construir un lloc webplantilla, es recomana utilitzar-laWordPressTema adaptatiu per a:

Què significa adaptació d'imatge CSS?

L'autoadaptació d'imatges CSS fa referència a fer les imatges a la pàgina web html, mitjançant el codi CSS:

Pròxim,Chen WeiliangCompartiré amb vosaltres el codi d'escala proporcional img CSS ^_^

Codi adaptatiu d'alçada i amplada de la imatge CSS

Insereix imatge en html:

Si voleu que la imatge s'adapti a la petita mida de la pantalla en lloc de mantenir-se fixa en amplada i alçada.

Podeu afegir el codi següent al fitxer style.css del vostre tema de WordPress ▼

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

declaració aquímax-widthregla d'amplada màxima

• per garantir que totes les imatges es mostrin com a màxim al 100% (és a dir, només es poden mostrar tan grans com les seves pròpies imatges).
• En aquest punt, si l'element que conté la imatge (per exemple, el cos o el div que conté la imatge) és més petit que l'amplada inherent de la imatge, la imatge s'escalarà per omplir l'espai màxim disponible.

width:auto;significa amplada automàtica

\9 És una manera d'escriure hack css.

• D'aquesta manera, s'afegeix "\9" al codi css normal, només el navegador IE pot reconèixer-lo, altres navegadors ignoraran aquesta declaració.
• D'aquesta manera s'aconseguirà la diferenciació del navegador, habilitant el propòsit dels navegadors compatibles.

Per què no utilitzar l'amplada: 100%?

Per aconseguir l'escala automàtica de les imatges, també podeu utilitzar les propietats d'amplada més utilitzades, p.width：100％.

Tanmateix, aquesta regla no s'aplica aquí.

• Perquè aquesta regla farà que sembli tan ample com el seu contenidor.
• En els casos en què el contenidor és molt més ample que la imatge, la imatge s'estirarà innecessàriament.

注意 事项

Què són els selectors CSS? Quina diferència hi ha entre class i id?Els tutorials següents parlen de ▼

Quina diferència hi ha entre la classe de selector CSS i l'identificador? ús d'identificador i classe en HTML

Quina diferència hi ha entre la classe de selector CSS i l'identificador? L'ús de l'identificador i la classe a HTML Chen Weiliang actualment està realitzant SEO i optimitzant el tema de WordPress del lloc web.Tot i que abans he après alguns coneixements bàsics d'HTML i CSS, però fa temps que no l'he utilitzat, especialment la part de CSS...

Com reprodueix el lloc web per a mòbils el vídeo MP4 adaptat a la pàgina?Feu clic a l'enllaç següent ▼

Com s'adapta la pàgina web H5 MP4 a la pàgina? El lloc web mòbil reprodueix codi HTML de vídeo

El màrqueting de vídeo és una part integral del màrqueting en línia: molts professionals de la promoció en línia sovint utilitzen el vídeo combinat amb el "màrqueting viral" per generar trànsit.Si el màrqueting de WeChat es combina amb el màrqueting de vídeo, pot millorar encara més la taxa de conversió de redacció de nous mitjans i comerç electrònic social.Tinc molts amics...