Web page HTML 5 image adaptive screen img proportional scaling code

Tungod sa nag-uswag nga mobile Internet,Wechat marketingAng pagkapopular sa mga mobile phone nahimongKinabuhikinahanglan nga adunay himan.

Pagtukod ug estasyontemplate, girekomendar nga gamitonWordPressMapasibo nga tema para sa:

Unsa ang gipasabut sa CSS image adaptive?

Ang CSS image self-adaptation nagtumong sa paghimo sa mga hulagway sa html web page, pinaagi sa CSS code:

Sunod,Chen WeiliangAkong ipaambit kanimo ang CSS img proportional scaling code ^_^

Ang gitas-on sa imahe sa CSS ug gilapdon nga adaptive code

Isulod ang hulagway sa html:

Kung gusto nimo nga ang imahe ipahiangay sa gamay nga gidak-on sa screen imbes nga magpabilin nga gitakda sa gilapdon ug gitas-on.

Mahimo nimong idugang ang mosunod nga code sa style.css file sa imong WordPress nga tema ▼

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

pahayag dinhimax-widthmaximum nga gilapdon nga lagda

• aron masiguro nga ang tanan nga mga imahe gipakita sa labing taas nga 100% (pananglitan, mahimo ra silang ipakita nga ingon kadako sa ilang kaugalingon nga mga imahe).
• Niini nga punto, kung ang elemento nga adunay sulud nga imahe (pananglitan, ang lawas o div nga adunay sulud nga imahe) mas gamay kaysa sa kinaiyanhon nga gilapdon sa imahe, ang imahe i-scale aron mapuno ang labing kadaghan nga magamit nga wanang.

width:auto;nagpasabut nga awtomatik nga gilapdon

\9 Kini usa ka paagi sa pagsulat sa hack css.

• Niining paagiha, ang "\9" gidugang sa normal nga css code, ang IE browser ra ang makaila niini, ang ubang mga browser dili magtagad niini nga pahayag.
• Makab-ot niini ang pagkalahi sa browser, nga makapahimo sa katuyoan sa mga compatible nga browser.

Nganong dili gamiton ang gilapdon: 100%?

Aron makab-ot ang awtomatik nga pag-scale sa mga hulagway, mahimo usab nimong gamiton ang mas kasagarang gigamit nga gilapdon nga mga kabtangan, pananglitan.width：100％.

Bisan pa, kini nga lagda wala magamit dinhi.

• Tungod kay kini nga lagda magpakita nga sama ka lapad sa sudlanan niini.
• Sa mga kaso diin ang sudlanan labi ka lapad kaysa sa imahe, ang imahe i-stretch nga dili kinahanglan.

Pagpangandam

Unsa ang mga tigpili sa CSS? Unsa ang kalainan tali sa klase ug id?Ang mosunod nga mga tutorial naghisgot bahin sa ▼

Unsa ang kalainan tali sa CSS selector class ug id? id ug paggamit sa klase sa HTML

Unsa ang kalainan tali sa CSS selector class ug id? Ang paggamit sa id ug klase sa HTML Chen Weiliang sa pagkakaron naghimo sa SEO ug pag-optimize sa WordPress nga tema sa website.Bisan tuod ako nakakat-on sa pipila ka mga batakang HTML ug CSS kahibalo kaniadto, apan wala pa nako kini maoperahan sa makadiyot, ilabi na ang bahin sa CSS...

Giunsa nga ang mobile website magdula sa MP4 nga video nga mapahiangay sa panid?Palihug i-klik ang link sa ubos ▼

Giunsa pagpahaom sa H5 webpage MP4 sa panid? Ang mobile website nagdula sa video html code

Ang pagpamaligya sa video usa ka hinungdanon nga bahin sa pagpamaligya sa online: daghang mga practitioner sa promosyon sa online kanunay nga naggamit sa video nga giubanan sa "viral marketing" aron madala ang trapiko.Kung ang WeChat marketing gikombinar sa video marketing, kini makapauswag pa sa copywriting conversion rate sa bag-ong media ug social e-commerce.Daghan kog amigo...