HTML 5 ata fetuutuuna'i lau img fa'ailoga fua fa'atatau mo itulau web HTML XNUMX

Ona o le televave o le Initaneti feaveaʻi,Wechat maketiinaUa avea le lauiloa o telefoni feaveaiSoifuameafaigaluega e tatau ona i ai.

fausia se upega tafa'ilagimamanu, e fautuaina e faʻaaogaWordPressAutu fetuutuunai mo:

  • Afai e leʻi faia e le tagata faʻapipiʻi autu o le WordPress le HTML 5 image adaptive screen lelei pe a mamanuina le itulau autu o le WordPress...
  • O le suʻesuʻeina o le upega tafaʻilagi i luga o se masini feaveaʻi, o le ai ai se ata mataga tele, ma o le tagata faʻaoga e matua leaga lava!

O le a le uiga o le CSS image adaptive?

HTML 5 ata fetuutuuna'i lau img fa'ailoga fua fa'atatau mo itulau web HTML XNUMX

CSS image adaptive o lona uiga o le faia o ata i le itulau html itulau, e ala i le CSS code:

  • Otometi faʻafetaui i le lautele ma le maualuga o masini eseese.
  • O le img tag e otometi lava ona fua fa'atatau.

Le isiChen WeiliangO le a ou faasoa atu ia te oe le CSS img proportional scaling code ^_^

CSS maualuga ata ma le lautele fetuutuunai code

Fa'aofi ata ile html:

Afai e te manaʻo e faʻafetaui le ata i le laʻititi laʻititi o le lau nai lo le tumau i le lautele ma le maualuga.

E mafai ona e fa'aopoopo le code lea i le style.css faila o lau autu WordPress ▼

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

faamatalaga iineimax-widthtulafono lautele maualuga

  • ia mautinoa o ata uma o loʻo faʻaalia i luga ole 100% (o lona uiga, e mafai ona faʻaalia e pei o latou lava ata).
  • I le taimi nei, afai o le elemene o loʻo i ai le ata (mo se faʻataʻitaʻiga, o le tino poʻo le div o loʻo i ai le ata) e laʻititi nai lo le lautele o le ata, o le a faʻateleina le ata e faʻatumu ai le avanoa maualuga.

width:auto;o lona uiga otometi lautele

\9 O se auala e tusia ai le hack css.

  • I lenei auala, "\9" ua faʻaopoopo i le css code masani, naʻo le IE browser e mafai ona iloa, o isi tagata suʻesuʻe o le a le amanaiaina lenei faʻamatalaga.
  • O lenei mea o le a ausia ai le eseesega o suʻesuʻega, faʻatagaina le faʻamoemoe o suʻesuʻega fetaui.

Aisea e le faʻaogaina ai le lautele: 100%?

Ina ia ausia le fuaina otometi o ata, e mafai foʻi ona e faʻaogaina mea e masani ona faʻaaogaina lautele, eg.width:100%.

Ae ui i lea, o lenei tulafono e le faʻaaogaina iinei.

  • Aua o lenei tulafono o le a faʻaalia ai le lautele e pei o lona atigipusa.
  • I tulaga e sili atu le lautele o le atigipusa nai lo le ata, o le ata o le a faʻalauteleina e le tatau.

Lapataiga

O a CSS filifilia? O le a le eseesega i le va o le vasega ma le id?O a'oa'oga nei e talanoa e uiga i ▼

E fa'afefea ona ta'alo e le 'upega tafa'ilagi feavea'i le vitio MP4 e fetaui ma le itulau?Fa'amolemole kiliki le so'oga i lalo ▼

 

Hope Chen Weiliang Blog ( https://www.chenweiliang.com/ ) fefa'asoaa'i le "Web page HTML 5 image adaptive screen img proportional scaling code", lea e fesoasoani ia te oe.

Fa'afeiloa'i e fa'asoa le so'otaga o lenei tusitusiga:https://www.chenweiliang.com/cwl-964.html

Faʻafeiloaʻi i le Telegram channel o le blog a Chen Weiliang e maua ai faʻamatalaga lata mai!

🔔 Ia avea oe ma tagata muamua e maua le taua "ChatGPT Content Marketing AI Tool Usage Guide" i le laina pito i luga o le lisi! 🌟
📚 O lenei taʻiala o loʻo i ai le taua tele, 🌟O se avanoa e seasea maua, aua le misia! ⏰⌛💨
Faasoa ma fiafia pe a e fiafia i ai!
O lau fefa'asoaa'i ma le fiafia o la matou fa'aosofiaga faifaipea!

 

发表 评论

O le a le faʻasalalauina lau tuatusi imeli. Faʻaoga fanua e manaʻomia * Igoa

tusi i luga