HTML 5 billedadaptiv skærm img proportional skaleringskode for webside HTML XNUMX

På grund af det blomstrende mobile internet,WeChat MarketingPopulariteten af ​​mobiltelefoner er blevetLivetet must-have værktøj.

bygge en hjemmesideskabelon, anbefales det at brugehood.discountAdaptivt tema til:

Hvad betyder CSS image adaptive?

CSS-billedadaptiv betyder at lave billederne på html-websiden gennem CSS-kode:

Næste,Chen WeiliangJeg vil dele CSS img proportional skaleringskode med dig ^_^

CSS-billedadaptiv kode for højde og bredde

Indsæt billede i html:

Hvis du ønsker, at billedet skal tilpasse sig skærmens lille størrelse i stedet for at forblive fast i bredden og højden.

Du kan tilføje følgende kode til style.css-filen til dit WordPress-tema ▼

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

udtalelse hermax-widthmaksimal bredde regel

• for at sikre, at alle billeder vises maksimalt 100 % (dvs. de kan kun vises så store som deres egne billeder).
• På dette tidspunkt, hvis elementet, der indeholder billedet (f.eks. kroppen eller div, der indeholder billedet) er mindre end billedets iboende bredde, vil billedet blive skaleret til at fylde den maksimalt tilgængelige plads.

width:auto;betyder automatisk bredde

\9 Det er en måde at skrive hack css på.

• På denne måde tilføjes "\9" til den normale css-kode, kun IE browser kan genkende den, andre browsere vil ignorere denne erklæring.
• Dette vil opnå browserdifferentiering, hvilket muliggør formålet med kompatible browsere.

Hvorfor ikke bruge bredde: 100%?

For at opnå automatisk skalering af billeder kan du også bruge de mere almindeligt anvendte breddeegenskaber, f.eks.width：100％.

Denne regel gælder dog ikke her.

• Fordi denne regel vil få den til at fremstå lige så bred som dens beholder.
• I tilfælde, hvor beholderen er meget bredere end billedet, strækkes billedet unødigt.

注意 事项

Hvad er CSS-vælgere? Hvad er forskellen mellem klasse og id?Følgende tutorials taler om ▼

🔗Hvad er forskellen mellem CSS-vælgerklasse og id? Brug af id og klasse i HTML

Hvordan afspiller mobilwebstedet MP4-video tilpasset til siden?Klik venligst på linket nedenfor ▼

🔗Hvordan tilpasser man H5-websiden MP4 til siden HTML-koden til afspilning af videoer på mobilwebsteder?