HTML 5 image adaptive screen img proportional scaling code for webpage HTML XNUMX

Chifukwa chakukula kwa intaneti yam'manja,Wechat malondaKutchuka kwa mafoni a m'manja kwakhalaMoyochida chofunika.

Mangani malo okwereratemplate, tikulimbikitsidwa kugwiritsa ntchitoWordPressMutu wosinthira wa:

Kodi kusintha kwa chithunzi cha CSS kumatanthauza chiyani?

Kusintha kwazithunzi za CSS kumatanthawuza kupanga zithunzi patsamba la html, kudzera pa nambala ya CSS:

Ena,Chen WeiliangNdigawana nanu CSS img proportional scaling code ^_^

Kutalika kwa chithunzi cha CSS ndi code yosinthira m'lifupi

Ikani chithunzi mu html:

Ngati mukufuna kuti chithunzicho chigwirizane ndi kukula kochepa kwa chinsalu m'malo mokhazikika m'lifupi ndi kutalika.

Mutha kuwonjezera nambala iyi ku fayilo ya style.css ya mutu wanu wa WordPress ▼

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

mawu apamax-widthlamulo lalikulu la m'lifupi

• kuwonetsetsa kuti zithunzi zonse zikuwonetsedwa pamlingo wopitilira 100% (ie zitha kuwonetsedwa zazikulu ngati zithunzi zawo).
• Panthawiyi, ngati chinthu chomwe chili ndi chithunzicho (mwachitsanzo, thupi kapena div yomwe ili ndi chithunzi) ndi yaying'ono kusiyana ndi kukula kwake kwa chithunzicho, chithunzicho chidzasinthidwa kuti chidzaze malo omwe alipo.

width:auto;kutanthauza m'lifupi mwake

\9 Ndi njira yolembera kuthyolako css.

• Mwanjira iyi, "\ 9" imawonjezedwa ku code ya css, msakatuli wa IE yekha angazindikire, asakatuli ena amanyalanyaza mawu awa.
• Izi zidzakwaniritsa kusiyana kwa osatsegula, ndikupangitsa cholinga cha asakatuli ogwirizana.

Bwanji osagwiritsa ntchito m'lifupi: 100%?

Kuti mukwaniritse makulitsidwe azithunzi, mutha kugwiritsanso ntchito mawonekedwe omwe amagwiritsidwa ntchito kwambiri, mwachitsanzo.width：100％.

Komabe, lamuloli silikugwira ntchito pano.

• Chifukwa lamuloli lipangitsa kuti liwoneke ngati lalikulu ngati chidebe chake.
• Zikadakhala kuti chidebecho ndi chokulirapo kuposa chithunzicho, chithunzicho chidzatambasulidwa mosayenera.

Njira zopewera

Kodi osankha CSS ndi chiyani? Kodi pali kusiyana kotani pakati pa kalasi ndi id?Maphunziro otsatirawa akukamba za ▼

🔗Kodi pali kusiyana kotani pakati pa CSS selector class ndi id? Kugwiritsa ntchito id ndi kalasi mu HTML

Kodi tsamba lawebusayiti limasewera bwanji mavidiyo a MP4 mogwirizana ndi tsambali?Chonde dinani ulalo womwe uli pansipa ▼

🔗Kodi mungasinthire bwanji tsamba la H5 MP4 kuti likhale latsamba?