HTML 5 bildo adapta ekrano img proporcia skalkodo por retpaĝo HTML XNUMX

Pro la eksploda movebla Interreto,Wechat-merkatadoLa populareco de poŝtelefonoj fariĝisVivonepra ilo.

konstrui retejonŝablonon, oni rekomendas uzi ĝinWordPressAdapta temo por:

Kion signifas CSS-adaptiga bildo?

CSS-bilda adaptado signifas fari la bildojn en la html-retpaĝo, per CSS-kodo:

Tuj poste,Chen WeiliangMi dividos kun vi la CSS-img-proporcian skalan kodon ^_^

CSS-bilda alteco kaj larĝo adapta kodo

Enigu bildon en html:

Se vi volas, ke la bildo adaptiĝu al la malgranda grandeco de la ekrano anstataŭ resti fiksita en larĝo kaj alto.

Vi povas aldoni la sekvan kodon al la style.css-dosiero de via WordPress-temo ▼

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

deklaro ĉi tiemax-widthregulo de maksimuma larĝo

• por certigi, ke ĉiuj bildoj estas montrataj maksimume 100% (t.e. ili nur povas esti montrataj same grandaj kiel siaj propraj bildoj).
• Je ĉi tiu punkto, se la elemento enhavanta la bildon (ekzemple, la korpo aŭ div enhavanta la bildon) estas pli malgranda ol la eneca larĝo de la bildo, la bildo estos skalita por plenigi la maksimuman disponeblan spacon.

width:auto;signifas aŭtomatan larĝon

\9 Ĝi estas maniero skribi hack css.

• Tiamaniere, "\9" estas aldonita al la normala css-kodo, nur IE-retumilo povas rekoni ĝin, aliaj retumiloj ignoros ĉi tiun deklaron.
• Ĉi tio atingos diferencigon de retumilo, ebligante la celon de kongruaj retumiloj.

Kial ne uzi larĝon: 100%?

Por atingi aŭtomatan skalon de bildoj, vi povas ankaŭ uzi la pli ofte uzatajn larĝpropraĵojn, ekz.width：100％.

Tamen ĉi tiu regulo ne validas ĉi tie.

• Ĉar ĉi tiu regulo aperigos ĝin same larĝa kiel ĝia ujo.
• En kazoj kie la ujo estas multe pli larĝa ol la bildo, la bildo estos etendita nenecese.

Antaŭzorgoj

Kio estas CSS-elektiloj? Kio estas la diferenco inter klaso kaj id?La sekvaj lerniloj parolas pri ▼

Kio estas la diferenco inter CSS-elektilklaso kaj id? id kaj klasuzo en HTML

Kio estas la diferenco inter CSS-elektilklaso kaj id? La uzado de id kaj klaso en HTML Chen Weiliang nuntempe plenumas SEO kaj optimumigas la WordPress-temon de la retejo.Kvankam mi jam lernis kelkajn bazajn HTML- kaj CSS-scion antaŭe, sed mi ne funkciis ĝin dum kelka tempo, precipe la CSS-parton...

Kiel la movebla retejo ludas MP4-videon adaptan al la paĝo?Bonvolu klaki la suban ligilon ▼

Kiel H5-retpaĝo MP4 adaptiĝas al la paĝo? Poŝtelefona retejo ludas video-html-kodon

Videomerkatado estas integra parto de reta merkatado: multaj praktikantoj pri interreta reklamado ofte uzas filmeton kombinitan kun "virusa merkatado" por movi trafikon.Se WeChat-merkatado estas kombinita kun video-merkatado, ĝi povas plu plibonigi la kopiskriban konvertiĝon de novaj amaskomunikiloj kaj socia retkomerco.Mi havas multajn amikojn...