HTML 5 képadaptív képernyő img arányos léptékezési kód a HTML XNUMX weboldalhoz

A fellendülő mobilinternet miattWechat marketingA mobiltelefonok népszerűsége lettéletkötelező eszköz.

Építs egy állomástsablon használata javasoltWordPressAdaptív téma:

Mit jelent a CSS-kép adaptív?

A CSS kép adaptív azt jelenti, hogy a képeket a html weboldalon CSS kódon keresztül készítjük el:

Következő,Chen WeiliangMegosztom veled a CSS img arányos skálázási kódot ^_^

CSS-kép magasság és szélesség adaptív kód

Kép beszúrása html-be:

Ha azt szeretné, hogy a kép alkalmazkodjon a képernyő kis méretéhez, ahelyett, hogy szélességében és magasságában rögzített maradna.

A következő kódot hozzáadhatja WordPress-témájának style.css fájljához ▼

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

nyilatkozat ittmax-widthmaximális szélesség szabály

• annak biztosítása érdekében, hogy az összes kép legfeljebb 100%-ban jelenjen meg (azaz csak akkora méretű, mint a saját képük).
• Ezen a ponton, ha a képet tartalmazó elem (például a képet tartalmazó törzs vagy div) kisebb, mint a kép saját szélessége, a kép méretezve lesz, hogy kitöltse a maximálisan rendelkezésre álló helyet.

width:auto;automatikus szélességet jelent

\9 Ez egy módszer a hack css írására.

• Ily módon a "\9" hozzáadódik a normál css kódhoz, csak az IE böngésző tudja felismerni, a többi böngésző figyelmen kívül hagyja ezt az utasítást.
• Ezzel elérhető lesz a böngészők megkülönböztetése, lehetővé téve a kompatibilis böngészők célját.

Miért nem használja a szélességet: 100%?

A képek automatikus méretezésének eléréséhez használhatjuk a gyakrabban használt szélességi tulajdonságokat is, pl.width：100％.

Ez a szabály azonban itt nem érvényes.

• Mert ez a szabály olyan szélesnek fog tűnni, mint a tárolója.
• Azokban az esetekben, amikor a tároló sokkal szélesebb, mint a kép, a kép szükségtelenül megnyúlik.

注意 事项

Mik azok a CSS-szelektorok? Mi a különbség az osztály és az azonosító között?A következő oktatóanyagok a ▼-ról beszélnek

Mi a különbség a CSS-választó osztály és az azonosító között? azonosító és osztályhasználat HTML-ben

Mi a különbség a CSS-választó osztály és az azonosító között? Az azonosító és osztály használata a HTML-ben Chen Weiliang jelenleg SEO-t hajt végre, és optimalizálja a webhely WordPress témáját.Bár korábban tanultam néhány alapvető HTML és CSS ismeretet, de egy ideje nem üzemeltetem, főleg a CSS részét...

Hogyan játssza le a mobilwebhely az oldalhoz alkalmazkodó MP4 videót?Kérjük, kattintson az alábbi linkre ▼

Hogyan alkalmazkodik a H5 weboldal MP4 az oldalhoz?A mobil weboldal videó html kódot játszik le

A videomarketing az online marketing szerves részét képezi: sok online promóciós szakember gyakran használja a videót "vírusmarketinggel" kombinálva a forgalom növelésére.Ha a WeChat marketinget videómarketinggel kombináljuk, az tovább javíthatja az új média és a közösségi e-kereskedelem szövegírási konverziós arányát.Sok barátom van...