HTML 5 vaizdo adaptyvus ekranas img proporcingas mastelio keitimo kodas tinklalapiui HTML XNUMX

Dėl klestinčio mobiliojo interneto,Wechat rinkodaraMobiliųjų telefonų populiarumas tapoGyvenimasprivalomas įrankis.

Pastatykite stotįšabloną, rekomenduojama naudotiWordPressPritaikoma tema:

Ką reiškia CSS vaizdo adaptyvus?

CSS vaizdo pritaikymas reiškia, kad vaizdai HTML tinklalapyje, naudojant CSS kodą:

Kitas,Chen WeiliangPasidalinsiu su jumis CSS img proporcingu mastelio keitimo kodu ^_^

CSS vaizdo aukščio ir pločio adaptacinis kodas

Įterpti vaizdą į html:

Jei norite, kad vaizdas prisitaikytų prie mažo ekrano dydžio, o ne liktų fiksuotas pločio ir aukščio.

Šį kodą galite pridėti prie savo „WordPress“ temos failo style.css ▼

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

pareiškimas čiamax-widthmaksimalaus pločio taisyklė

• užtikrinti, kad visi vaizdai būtų rodomi maksimaliai 100 % (t. y. jie gali būti rodomi tik tokio dydžio kaip jų pačių vaizdai).
• Šiuo metu, jei elementas, kuriame yra vaizdas (pavyzdžiui, korpusas arba elementas, kuriame yra vaizdas), yra mažesnis nei būdingas vaizdo plotis, vaizdo mastelis bus pakeistas taip, kad užpildytų maksimalią laisvą erdvę.

width:auto;reiškia automatinį plotį

\9 Tai būdas rašyti hack css.

• Tokiu būdu „\9“ pridedamas prie įprasto css kodo, jį atpažinti gali tik IE naršyklė, kitos naršyklės nepaisys šio teiginio.
• Taip bus pasiekta naršyklių diferenciacija, kuri leis naudoti suderinamas naršykles.

Kodėl nenaudojus pločio: 100%?

Norėdami pasiekti automatinį vaizdų mastelį, taip pat galite naudoti dažniau naudojamas pločio savybes, pvz.width：100％.

Tačiau ši taisyklė čia negalioja.

• Kadangi pagal šią taisyklę jis atrodys toks pat platus kaip ir konteineris.
• Tais atvejais, kai konteineris yra daug platesnis nei vaizdas, vaizdas bus be reikalo ištemptas.

注意 事项

Kas yra CSS selektoriai? Kuo skiriasi klasė ir ID?Šiose pamokose kalbama apie ▼

Kuo skiriasi CSS parinkiklio klasė ir ID? ID ir klasės naudojimas HTML

Kuo skiriasi CSS parinkiklio klasė ir ID? ID ir klasės naudojimas HTML Chen Weiliang šiuo metu atlieka SEO ir optimizuoja svetainės „WordPress“ temą.Nors ir anksčiau išmokau keletą pagrindinių HTML ir CSS žinių, bet kurį laiką jomis nenaudojau, ypač CSS...

Kaip svetainė mobiliesiems atkuria MP4 vaizdo įrašus, prisitaikančius prie puslapio?Spustelėkite žemiau esančią nuorodą ▼

Kaip H5 tinklalapis MP4 prisitaiko prie puslapio Mobili svetainė atkuria vaizdo html kodą

Vaizdo įrašų rinkodara yra neatsiejama internetinės rinkodaros dalis: daugelis internetinės reklamos specialistų dažnai naudoja vaizdo įrašus kartu su „virusine rinkodara“, kad padidintų srautą.Jei „WeChat“ rinkodara derinama su vaizdo įrašų rinkodara, ji gali dar labiau pagerinti naujosios žiniasklaidos ir socialinės el. prekybos tekstų rašymo konversijos koeficientą.Aš turiu daug draugų...