Artikola Adresaro
Pro la eksploda movebla Interreto,Wechat-merkatadoLa populareco de poŝtelefonoj fariĝisVivonepra ilo.
konstrui retejonŝablonon, oni rekomendas uzi ĝinWordPressAdapta temo por:
- 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.
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 ▼
Kiel la movebla retejo ludas MP4-videon adaptan al la paĝo?Bonvolu klaki la suban ligilon ▼
Hope Chen Weiliang Blogo ( https://www.chenweiliang.com/ ) dividis "Retpaĝo HTML 5 bildo adapta ekrano img proporcia skalkodo", kiu estas helpema al vi.
Bonvenon dividi la ligon de ĉi tiu artikolo:https://www.chenweiliang.com/cwl-964.html