HTML 5 image adaptive screen img proporcionálny škálovací kód pre webovú stránku HTML XNUMX

Vzhľadom na rozmach mobilného internetu,Wechat marketingPopularita mobilných telefónov sa zvýšilaživotnevyhnutný nástroj.

vytvoriť webovú stránkušablónu, odporúča sa použiťWordPressAdaptívny motív pre:

Čo znamená prispôsobenie obrázkov CSS?

Prispôsobenie obrázkov CSS znamená vytváranie obrázkov na webovej stránke html pomocou kódu CSS:

Ďalšie,Chen WeiliangPodelím sa s vami o kód CSS img proporcionálneho škálovania ^_^

CSS kód prispôsobujúci výšku a šírku obrázka

Vložiť obrázok do html:

Ak chcete, aby sa obraz prispôsobil malej veľkosti obrazovky namiesto toho, aby zostal fixne na šírku a výšku.

Nasledujúci kód môžete pridať do súboru style.css vašej témy WordPress ▼

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

vyhlásenie tumax-widthpravidlo maximálnej šírky

• aby sa zabezpečilo, že všetky obrázky sa zobrazia maximálne na 100 % (t. j. môžu byť zobrazené len také veľké ako ich vlastné obrázky).
• V tomto bode, ak je prvok obsahujúci obrázok (napríklad telo alebo prvok div obsahujúci obrázok) menší ako vlastná šírka obrázka, obrázok sa prispôsobí tak, aby zaplnil maximálny dostupný priestor.

width:auto;znamená automatickú šírku

\9 Je to spôsob písania hack css.

• Týmto spôsobom sa "\9" pridá k normálnemu css kódu, iba prehliadač IE ho dokáže rozpoznať, ostatné prehliadače budú toto vyhlásenie ignorovať.
• Tým sa dosiahne diferenciácia prehliadačov, čo umožní účel kompatibilných prehliadačov.

Prečo nepoužiť šírku: 100 %?

Na dosiahnutie automatického škálovania obrázkov môžete využiť aj častejšie používané vlastnosti šírky, napr.width：100％.

Toto pravidlo tu však neplatí.

• Pretože toto pravidlo spôsobí, že bude vyzerať tak široký ako jeho kontajner.
• V prípadoch, keď je nádoba oveľa širšia ako obrázok, bude obrázok zbytočne roztiahnutý.

注意 事项

Čo sú selektory CSS? Aký je rozdiel medzi triedou a ID?Nasledujúce návody hovoria o ▼

Aký je rozdiel medzi triedou selektora CSS a ID? použitie id a triedy v HTML

Aký je rozdiel medzi triedou selektora CSS a ID? Použitie id a triedy v HTML Chen Weiliang v súčasnosti vykonáva SEO a optimalizuje tému WordPress na webovej stránke.Síce som sa už predtým naučil nejaké základné HTML a CSS znalosti, ale nejaký čas som to neovládal, hlavne CSS časť...

Ako prispôsobiť stránku na prehrávanie MP4 videa na mobilnom webe?Kliknite na odkaz nižšie ▼

Ako sa webová stránka H5 MP4 prispôsobí stránke? Mobilná webová stránka prehrá html kód videa

Video marketing je neoddeliteľnou súčasťou online marketingu: mnohí odborníci na online propagáciu často používajú video v kombinácii s „vírusovým marketingom“ na zvýšenie návštevnosti.Ak sa marketing WeChat skombinuje s video marketingom, môže to ďalej zlepšiť mieru konverzie copywritingu v nových médiách a elektronickom obchode na sociálnych sieťach.Mám veľa priateľov...