HTML 5 image adaptive screen img proporsjonele skaalkoade foar webside HTML XNUMX

Troch it bloeiende mobyl ynternet,Wechat marketingDe populariteit fan mobile tillefoans is wurdenLibbenmust-have ark.

bouwe in websidesjabloan, it is oan te rieden om te brûkenWordPressOanpast tema foar:

Wat betsjut CSS-ôfbylding adaptyf?

CSS-ôfbylding sels-oanpassing ferwiist nei it meitsjen fan de ôfbyldings yn 'e html-webside, fia CSS-koade:

Folgjende,Chen WeiliangIk sil diele mei jo de CSS img proporsjonele skaalfergrutting koade ^_^

CSS ôfbylding hichte en breedte adaptive koade

Ofbylding ynfoegje yn html:

As jo ​​​​wolle dat de ôfbylding oanpast oan 'e lytse grutte fan it skerm ynstee fan fêst te bliuwen yn breedte en hichte.

Jo kinne de folgjende koade tafoegje oan it style.css-bestân fan jo WordPress-tema ▼

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

ferklearring hjirmax-widthmaksimum breedte regel

• om derfoar te soargjen dat alle bylden wurde werjûn op maksimaal 100% (d.w.s. se kinne allinnich werjûn wurde sa grut as harren eigen bylden).
• Op dit punt, as it elemint dat de ôfbylding befettet (bygelyks it lichem of div dat de ôfbylding befettet) lytser is dan de ynherinte breedte fan 'e ôfbylding, sil de ôfbylding skaal wurde om de maksimale beskikbere romte te foljen.

width:auto;betsjut automatyske breedte

\9 It is in manier om hack css te skriuwen.

• Op dizze manier wurdt "\9" tafoege oan de normale css-koade, allinich IE-blêder kin it werkenne, oare browsers sille dizze ferklearring negearje.
• Dit sil browserdifferinsjaasje berikke, wêrtroch it doel fan kompatibele browsers mooglik is.

Wêrom net brûke breedte: 100%?

Om automatyske skaalfergrutting fan bylden te berikken, kinne jo ek de meast brûkte breedte-eigenskippen brûke, bgl.width：100％.

Dizze regel jildt hjir lykwols net.

• Om't dizze regel it sa breed makket as syn kontener.
• Yn gefallen dêr't de kontener is folle breder as de ôfbylding, it byld wurdt spand ûnnedich.

Foarsoarchsmaatregels

Wat binne CSS-selektors? Wat is it ferskil tusken klasse en id?De folgjende tutorials prate oer ▼

🔗Wat is it ferskil tusken CSS-selektorklasse en id? Gebrûk fan id en klasse yn HTML

Hoe kinne jo de side oanpasse om MP4-fideo te spyljen op mobile webside?Klikje asjebleaft op de link hjirûnder ▼

🔗Hoe kinne jo H5 webside MP4 oanpasse oan 'e side Mobile webside spilet fideo html-koade