HTML 5 beeldaanpasbare skerm img proporsionele skaalkode vir webblad HTML XNUMX

Met die vinnige ontwikkeling van mobiele internet en die wydverspreide gebruik van WeChat-bemarking , het selfone 'n noodsaaklike hulpmiddel in die lewe geword.

Vir webwerf -sjablone beveel ons aan om WordPress responsiewe temas te gebruik:

Wat beteken CSS-beeldaanpasbaar?

CSS-beeldaanpassing verwys na die maak van beelde in html-webbladsye wat deur CSS-kode geïmplementeer word:

Volgende sal Chen Weiliang die CSS-kode met jou deel vir die proporsionele skaal van die grootte van 'n beeld. ^_^

CSS beeld hoogte en breedte aanpasbare kode

Voeg prent in html in:

As jy wil hê dat die beeld moet aanpas by die grootte van die skerm, eerder as om vas te bly in breedte en hoogte.

Jy kan die volgende kode by jou WordPress-tema se style.css-lêer voeg ▼

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

Verklaring hiermax-widthmaksimum breedte reël

• om te verseker dat alle beelde teen 'n maksimum van 100% vertoon word (d.w.s. hulle kan net so groot soos die beeld self vertoon word).
• Op hierdie punt, as die element wat die prent bevat (byvoorbeeld die liggaam of div wat die prent bevat) kleiner is as die inherente breedte van die prent, sal die prent geskaal word om die maksimum beskikbare spasie te vul.

width:auto;beteken outomatiese breedte

\9 Dit is 'n manier om hack css te skryf.

• Hierdie metode voeg "\9" by die gewone css-kode. Slegs IE-blaaier kan dit herken, ander blaaiers sal hierdie stelling ignoreer.
• Dit sal blaaierdifferensiasie bereik en die doel van versoenbare blaaiers moontlik maak.

Hoekom nie breedte: 100% gebruik nie?

Om outomatiese skaal van beelde te bereik, kan jy ook die meer algemeen gebruikte breedte-kenmerk gebruik, sooswidth：100％.

Hierdie reël is egter nie hier van toepassing nie.

• Want hierdie reël sal dit so wyd soos sy houer laat lyk.
• In gevalle waar die houer baie wyer as die beeld is, sal die beeld onnodig gerek word.

注意 事项

Wat is CSS-keurders? Wat is die verskil tussen klas en id? Die volgende handleiding sal daaroor praat ▼

🔗Wat is die verskil tussen CSS-keurderklas en ID? Gebruik van ID en klas in HTML

Hoe kan u die bladsy aanpas wanneer u MP4-video's op 'n mobiele webwerf speel? Klik asseblief op die skakel hieronder ▼

🔗Hoe om H5-webblad MP4 aan te pas by die bladsy Speel die mobiele webwerf video-html-kode?