Webpagina HTML 5 afbeelding adaptief scherm img proportionele schaalcode

Door de opkomst van mobiel internet,WeChat MarketingDe populariteit van mobiele telefoons is gewordenlevenonmisbare tool.

een website bouwensjabloon, het wordt aanbevolen om te gebruikenWordPressAdaptief thema voor:

Wat betekent CSS-beeldadaptief?

CSS afbeelding adaptief betekent om de afbeeldingen in de html-webpagina te maken, door middel van CSS-code:

De volgende,Chen WeiliangIk zal de CSS img proportionele schaalcode met u delen ^_^

CSS afbeelding hoogte en breedte adaptieve code

Afbeelding invoegen in html:

Als u wilt dat het beeld zich aanpast aan het kleine formaat van het scherm in plaats van vast te blijven in breedte en hoogte.

U kunt de volgende code toevoegen aan het style.css-bestand van uw WordPress-thema ▼

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

verklaring hiermax-widthregel voor maximale breedte

• om ervoor te zorgen dat alle afbeeldingen maximaal 100% worden weergegeven (d.w.z. ze kunnen alleen zo groot worden weergegeven als hun eigen afbeeldingen).
• Als het element dat de afbeelding bevat (bijvoorbeeld de body of div die de afbeelding bevat) kleiner is dan de inherente breedte van de afbeelding, wordt de afbeelding geschaald om de maximaal beschikbare ruimte te vullen.

width:auto;betekent automatische breedte

\9 Het is een manier om hack-css te schrijven.

• Op deze manier wordt "\9" toegevoegd aan de normale css-code, alleen IE-browser kan het herkennen, andere browsers zullen deze verklaring negeren.
• Hierdoor wordt browserdifferentiatie bereikt, waardoor het doel van compatibele browsers mogelijk wordt.

Waarom geen breedte gebruiken: 100%?

Om afbeeldingen automatisch te schalen, kunt u ook de meer algemeen gebruikte breedte-eigenschappen gebruiken, b.v.width：100％.

Deze regel is hier echter niet van toepassing.

• Omdat deze regel ervoor zorgt dat het zo breed wordt weergegeven als de container.
• In gevallen waarin de container veel breder is dan de afbeelding, wordt de afbeelding onnodig uitgerekt.

注意 事项

Wat zijn CSS-selectors? Wat is het verschil tussen klasse en id?De volgende tutorials gaan over

Wat is het verschil tussen CSS-selectorklasse en id? id en klassegebruik in HTML

Wat is het verschil tussen CSS-selectorklasse en id? Het gebruik van id en class in HTML Chen Weiliang voert momenteel SEO uit en optimaliseert het WordPress-thema van de website.Hoewel ik al wat basiskennis van HTML en CSS heb geleerd, maar ik heb het al een tijdje niet meer gebruikt, vooral het CSS-gedeelte...

Hoe de pagina aanpassen om MP4-video op een mobiele website af te spelen?Klik dan op onderstaande link

Hoe past de H5-webpagina MP4 zich aan de pagina aan? Mobiele website speelt video-html-code af

Videomarketing is een integraal onderdeel van online marketing: veel beoefenaars van online promotie gebruiken video vaak in combinatie met 'virale marketing' om meer bezoekers te trekken.Als WeChat-marketing wordt gecombineerd met videomarketing, kan het de conversieratio voor copywriting van nieuwe media en sociale e-commerce verder verbeteren.Ik heb veel vrienden...