HTML 5 beeldaanpasbare skerm img proporsionele skaalkode vir webblad HTML XNUMX

As gevolg van die bloeiende ontwikkeling van mobiele internet,Wechat bemarkingMet die gewildheid van selfone, het selfone gewordlewe'n Moet-hê hulpmiddel.

'n webwerf te bousjabloon, word dit aanbeveel om te gebruikWordPressAanpasbare temas vir:

Wat beteken CSS-beeldaanpasbaar?

CSS-beeldaanpassing verwys na die maak van beelde in html-webbladsye wat deur CSS-kode geïmplementeer word:

volgende,Chen WeiliangEk sal die CSS img proporsionele skaalkode met jou deel ^_^

CSS beeld hoogte en breedte aanpasbare kode

Voeg prent in html in:

As jy wil hê dat die beeld moet aanpas by die grootte van die skerm, eerder as om vas te bly in breedte en hoogte.

Jy kan die volgende kode by jou WordPress-tema se style.css-lêer voeg ▼

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

Verklaring hiermax-widthmaksimum breedte reël

• om te verseker dat alle beelde teen 'n maksimum van 100% vertoon word (d.w.s. hulle kan net so groot soos die beeld self vertoon word).
• Op hierdie punt, as die element wat die prent bevat (byvoorbeeld die liggaam of div wat die prent bevat) kleiner is as die inherente breedte van die prent, sal die prent geskaal word om die maksimum beskikbare spasie te vul.

width:auto;beteken outomatiese breedte

\9 Dit is 'n manier om hack css te skryf.

• Hierdie metode voeg "\9" by die gewone css-kode. Slegs IE-blaaier kan dit herken, ander blaaiers sal hierdie stelling ignoreer.
• Dit sal blaaierdifferensiasie bereik en die doel van versoenbare blaaiers moontlik maak.

Hoekom nie breedte: 100% gebruik nie?

Om outomatiese skaal van beelde te bereik, kan jy ook die meer algemeen gebruikte breedte-kenmerk gebruik, sooswidth：100％.

Hierdie reël is egter nie hier van toepassing nie.

• Want hierdie reël sal dit so wyd soos sy houer laat lyk.
• In gevalle waar die houer baie wyer as die beeld is, sal die beeld onnodig gerek word.

注意 事项

Wat is CSS-keurders? Wat is die verskil tussen klas en id? Die volgende handleiding sal daaroor praat ▼

Wat is die verskil tussen CSS-keurderklas en ID? id en klasgebruik in HTML

Wat is die verskil tussen CSS-keurderklas en ID? Gebruik van ID en klas in HTML Chen Weiliang het onlangs SEO uitgevoer en die WordPress-tema van die webwerf geoptimaliseer. Alhoewel ek vantevore basiese HTML- en CSS-kennis geleer het, het ek dit vir 'n ruk lank nie gebruik nie, veral die CSS-deel ...

Hoe kan u die bladsy aanpas wanneer u MP4-video's op 'n mobiele webwerf speel? Klik asseblief op die skakel hieronder ▼

Hoe pas H5-webblad MP4 by die bladsy aan? Mobiele webwerf speel video-html-kode

Videobemarking is 'n integrale deel van aanlynbemarking: baie aanlynpromosiepraktisyns gebruik dikwels video's gekombineer met "virale bemarking" om verkeer te lok. As WeChat-bemarking met videobemarking gekombineer word, kan dit die kopieskryf-omskakelingskoers van nuwe media en sosiale e-handel verder verbeter. Ek het baie vriende...