HTML 5 image adaptive screen img proportional scaling code para sa webpage HTML XNUMX

Dahil sa mabilis na pag-unlad ng mobile internet at malawakang paggamit ng WeChat marketing , ang mga mobile phone ay naging isang mahalagang kagamitan sa buhay .

Para sa mga template ng website , inirerekomenda namin ang paggamit ng mga WordPress responsive themes:

Ano ang ibig sabihin ng CSS image adaptive?

Ang CSS image self-adaptation ay tumutukoy sa paggawa ng mga larawan sa html web page, sa pamamagitan ng CSS code:

Sunod, ibabahagi sa inyo ni Chen Weiliang ang CSS code para sa proporsyonal na pag-scale ng laki ng isang imahe. ^_^

CSS image height at width adaptive code

Ipasok ang larawan sa html:

Kung gusto mong umangkop ang larawan sa maliit na sukat ng screen sa halip na manatiling maayos sa lapad at taas.

Maaari mong idagdag ang sumusunod na code sa style.css file ng iyong WordPress theme ▼

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

pahayag ditomax-widthpanuntunan ng maximum na lapad

• upang matiyak na ang lahat ng mga imahe ay ipinapakita sa maximum na 100% (ibig sabihin, ang mga ito ay maaari lamang ipakita na kasing laki ng kanilang sariling mga larawan).
• Sa puntong ito, kung ang elementong naglalaman ng larawan (halimbawa, ang katawan o div na naglalaman ng larawan) ay mas maliit kaysa sa likas na lapad ng larawan, ang larawan ay i-scale upang punan ang maximum na magagamit na espasyo.

width:auto;nangangahulugan ng awtomatikong lapad

\9 Ito ay isang paraan ng pagsulat ng hack css.

• Sa ganitong paraan, idinaragdag ang "\9" sa normal na css code, IE browser lang ang makakakilala nito, babalewalain ng ibang mga browser ang pahayag na ito.
• Makakamit nito ang pagkakaiba-iba ng browser, na nagbibigay-daan sa layunin ng mga katugmang browser.

Bakit hindi gumamit ng lapad: 100%?

Upang makamit ang awtomatikong pag-scale ng mga larawan, maaari mo ring gamitin ang mas karaniwang ginagamit na mga katangian ng lapad, hal.width：100％.

Gayunpaman, ang panuntunang ito ay hindi nalalapat dito.

• Dahil ipapakita ng panuntunang ito na kasing lapad ng lalagyan nito.
• Sa mga kaso kung saan ang lalagyan ay mas malawak kaysa sa larawan, ang larawan ay i-stretch nang hindi kinakailangan.

注意 事项

Ano ang mga tagapili ng CSS? Ano ang pagkakaiba ng klase at id?Ang mga sumusunod na tutorial ay nagsasalita tungkol sa ▼

🔗Ano ang pagkakaiba sa pagitan ng CSS selector class at id? Paggamit ng id at klase sa HTML

Paano nagpe-play ang mobile website ng MP4 na video na adaptive sa page?Paki-click ang link sa ibaba ▼

🔗Paano iakma ang H5 web page na MP4 sa page?