Artikola Adresaro
Kun la kreskanta disvolviĝo de movebla interreto kaj la ĝeneraligita uzo de merkatado per WeChat , poŝtelefonoj fariĝis esenca ilo en la vivo .
Por retejaj ŝablonoj, ni rekomendas uzi respondemajn temojn de WordPress :
- Se la WordPress-temo-programisto ne bone faris la HTML 5-bildan adaptan ekranon dum desegnado de la WordPress-temo-paĝo...
- Kiam vi retumas la retejon per poŝtelefono, estos tre malbela bildo misprezento, kaj la uzantsperto estas ege malbona!
Kion signifas CSS-adaptiga bildo?
CSS-bilda adaptado signifas fari la bildojn en la html-retpaĝo, per CSS-kodo:
- Aŭtomate adaptiĝu al la larĝo kaj alteco de malsamaj aparatoj.
- La img-etikedo estas aŭtomate skalita proporcie.
Poste, Chen Weiliang kunhavigos kun vi la CSS-kodon por proporcie skaligi la grandecon de bildo. ^_^
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 ▼
Kiel la movebla retejo ludas MP4-videon adaptan al la paĝo?Bonvolu klaki la suban ligilon ▼
Espereble, la artikolo "HTML 5 Bilda Regrandiga Kodo por Adaptiĝo al Ekrangrandeco kaj Proporcia Grandeco en Retpaĝoj" dividita en la blogo de Chen Weiliang ( https://www.chenweiliang.com/ ) estos helpema al vi.
Bonvolu kunhavigi la ligilon al ĉi tiu artikolo: https://www.chenweiliang.com/cwl-964.html