HTML 5 gambar adaptif layar img kode skala proporsional pikeun halaman wéb HTML XNUMX

Kusabab Internet mobile booming,pamasaran WechatPopularitas telepon sélulér parantos jantenHirupalat kudu-kudu.

ngawangun ramatloka atémplat, eta disarankeun pikeun ngagunakeunWordPressTéma adaptif pikeun:

Naon hartosna adaptif gambar CSS?

CSS image adaptif hartina nyieun gambar dina kaca web html, ngaliwatan kode CSS:

Teras,Chen WeiliangKuring baris babagi sareng anjeun CSS img kode skala sabanding ^_^

Jangkungna gambar CSS sareng kode adaptif lebar

Selapkeun gambar dina html:

Upami anjeun hoyong gambar pikeun adaptasi kana ukuran leutik layar tinimbang tetep dibereskeun dina lebar jeung jangkungna.

Anjeun tiasa nambihan kodeu ieu kana file style.css tina téma WordPress anjeun ▼

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

pernyataan di dieumax-widthaturan lebar maksimum

• pikeun mastikeun yén sakabéh gambar dipintonkeun dina maksimum 100% (i.e. aranjeunna ngan bisa ditampilkeun sakumaha badag salaku gambar sorangan).
• Dina titik ieu, lamun unsur nu ngandung gambar (contona, awak atawa div ngandung gambar) leuwih leutik batan lebar alamiah gambar urang, gambar bakal diskalakeun pikeun ngeusian spasi maksimum sadia.

width:auto;hartina lebar otomatis

\9 Ieu mangrupikeun cara nyerat hack css.

• Ku cara kieu, "\9" ditambahkeun kana kode css normal, ngan browser IE bisa ngakuan eta, browser sejen bakal malire pernyataan ieu.
• Ieu bakal ngahontal diferensiasi browser, sangkan tujuan browser cocog.

Naha henteu nganggo lebar: 100%?

Pikeun ngahontal skala otomatis gambar, Anjeun oge bisa make sipat lebar leuwih ilahar dipake, misalna.width：100％.

Sanajan kitu, aturan ieu teu lumaku di dieu.

• Kusabab aturan ieu bakal nyieun eta mucunghul sakumaha lega wadahna.
• Dina kasus dimana wadahna leuwih lega ti gambar, gambar bakal stretched unnecessarily.

Waspada

Naon anu pamilih CSS? Naon bedana kelas sareng id?Tutorial di handap ieu nyarioskeun ngeunaan ▼

Naon bédana antara kelas pamilih CSS sareng id? id sareng panggunaan kelas dina HTML

Naon bédana antara kelas pamilih CSS sareng id? Pamakéan id sareng kelas dina HTML Chen Weiliang ayeuna nuju ngalaksanakeun SEO sareng ngaoptimalkeun téma WordPress situs wéb.Sanajan kuring geus diajar sababaraha dasar HTML jeung CSS pangaweruh sateuacan, tapi kuring teu dioperasikeun pikeun sawatara waktu, utamana bagian CSS ...

Kumaha adaptasi halaman pikeun muterkeun pidéo MP4 dina situs wéb sélulér?Mangga klik link di handap ▼

Kumaha halaman wéb H5 MP4 adaptasi sareng halaman éta? Situs wéb mobile muterkeun kodeu html pidéo

Pemasaran pidéo mangrupikeun bagian integral tina pamasaran online: seueur praktisi promosi online sering nganggo pidéo digabungkeun sareng "pemasaran viral" pikeun ngajalankeun lalu lintas.Lamun WeChat pamasaran digabungkeun jeung pamasaran video, éta bisa salajengna ngaronjatkeun laju konversi Copywriting média anyar jeung sosial e-commerce.Kuring boga loba babaturan...