HTML 5 sawirka la qabsiga shaashadda img saamiga cabbirka ee bogga shabakadda HTML XNUMX

Sababo la xiriira Internet-ka mobilada oo aad u kobcaya,Suuqgeynta WeChatCaannimada taleefannada gacanta ayaa noqotayNoloshawaa in uu leeyahay qalab.

dhisa websitetemplate, waxaa lagu talinayaa in la isticmaaloWordPressMawduuca ku habboon:

  • Haddii horumariyaha theme WordPress uusan si fiican u samayn HTML 5 sawirka la qabsiga shaashadda marka uu nashqadeynayo bogga mawduuca WordPress...
  • Marka aad ka dhex baadhayso mareegaha mobaylka, waxa jiri doona sawir aad u fool xun, waayo-aragnimada isticmaaluhu aad bay u liidataa!

Waa maxay macnaha la qabsiga sawirka CSS?

HTML 5 sawirka la qabsiga shaashadda img saamiga cabbirka ee bogga shabakadda HTML XNUMX

Sawirka CSS la qabsiga macneheedu waa in la sameeyo sawirada bogga html, iyada oo loo marayo code CSS:

  • Si toos ah ula qabso ballaca iyo dhererka aaladaha kala duwan.
  • Summada img si toos ah ayaa loo miisaamayaa saami ahaan.

Xiga,Chen WeiliangWaxaan kula wadaagi doonaa CSS img koodhka cabirka saamiga ^_^

Dhererka sawirka CSS iyo koodka la qabsiga ballaca

Geli sawirka html:

Haddii aad rabto in sawirku la qabsado cabbirka yar ee shaashadda halkii aad ku sii hagaajin lahayd ballaca iyo dhererka.

Waxaad ku dari kartaa koodka soo socda faylka style.css ee mawduucaaga WordPress ▼

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

warbixin halkanmax-widthqaanuunka ballaca ugu badan

  • si loo hubiyo in dhammaan sawirada lagu soo bandhigo ugu badnaan 100% (ie, waxaa la soo bandhigi karaa oo kaliya sida weyn sida sawiradooda).
  • Halkaa marka ay marayso, haddii cunsurka uu ku jiro sawirka (tusaale, jidhka ama div ka kooban sawirka) uu ka yaraado ballaca sawirka, sawirka ayaa la miisaami doonaa si loo buuxiyo booska ugu badan ee la heli karo.

width:auto;macneheedu waa balac toos ah

\9 Waa hab loo qoro hack css.

  • Sidan, "\9" ayaa lagu daraa css code-ka caadiga ah, IE browser kaliya ayaa aqoonsan kara, daalacayaasha kale ayaa iska indhatiraya bayaankan.
  • Tani waxay gaari doontaa kala duwanaansho browser, awood u siinaya ujeedada daalacashada ku habboon.

Waa maxay sababta aan loo isticmaalin ballac: 100%?

Si aad si toos ah u miisaanto sawirada, waxa kale oo aad isticmaali kartaa sifooyinka ballaca ee inta badan la isticmaalo, tusaale.width:100%.

Si kastaba ha ahaatee, xeerkani halkan kuma khuseeyo.

  • Sababtoo ah sharcigani wuxuu ka dhigi doonaa inuu u muuqdo mid ballaaran sida weelkiisa.
  • Kiisaska uu weelku aad uga ballaadhan yahay sawirka, sawirka ayaa loo kala bixin doonaa si aan loo baahnayn.

Digtooni

Waa maxay xulashada CSS? Waa maxay farqiga u dhexeeya fasalka iyo id?Casharrada soo socdaa waxay ka hadlayaan ▼

Sidee websaydka moobaylku u ciyaaraa muuqaalka MP4 ee la qabsiga bogga?Fadlan guji xiriirka hoose ▼

 

Hope Chen Weiliang Blog ( https://www.chenweiliang.com/ ) la wadaagay "bogga shabakadda HTML 5 image adaptive screen img proporttional scaling code", kaas oo adiga ku caawinaya.

Ku soo dhawoow inaad wadaagto xiriirka maqaalkan:https://www.chenweiliang.com/cwl-964.html

Ku soo dhawoow kanaalka Telegramka ee Chen Weiliang's blog si aad u hesho wararkii ugu dambeeyay!

🔔 Noqo kuwa ugu horreeya ee hela "ChatGPT Content Suuqgeynta AI Hagaha Isticmaalka Qalabka" ee tusaha sare ee kanaalka! 🌟
📚 Hagahan waxa uu ka kooban yahay qiimo aad u weyn, 🌟Tani waa fursad naadir ah, ha seegin! ⏰⌛💨
Share iyo like saar hadaad jeceshahay!
Wadaagistaada iyo jeceylkaaga ayaa ah dhiirigelintayada joogtada ah!

 

评论

Cinwaanka emailkaaga lama daabici doono. 项 已 用 * Calaamadda

kor ugu rog