Pagina web HTML 5 imagine ecran adaptiv img cod de scalare proporțională

Datorită internetului mobil în plină expansiune,Marketing WechatPopularitatea telefoanelor mobile a devenitviațăinstrument obligatoriu.

construi un site webșablon, se recomandă utilizareaWordPressTemă adaptativă pentru:

Ce înseamnă CSS imagine adaptive?

Autoadaptarea imaginii CSS se referă la realizarea imaginilor în pagina web html, prin codul CSS:

Următor →,Chen WeiliangVă voi împărtăși codul de scalare proporțională img CSS ^_^

Cod adaptiv pentru înălțimea și lățimea imaginii CSS

Inserați imaginea în html:

Dacă doriți ca imaginea să se adapteze la dimensiunea mică a ecranului în loc să rămână fixă ​​în lățime și înălțime.

Puteți adăuga următorul cod în fișierul style.css al temei dvs. WordPress ▼

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

declarație aicimax-widthregula lățimii maxime

• pentru a vă asigura că toate imaginile sunt afișate la maximum 100% (adică pot fi afișate doar la fel de mari ca propriile imagini).
• În acest moment, dacă elementul care conține imaginea (de exemplu, corpul sau div-ul care conține imaginea) este mai mic decât lățimea inerentă a imaginii, imaginea va fi scalată pentru a umple spațiul maxim disponibil.

width:auto;înseamnă lățime automată

\9 Este un mod de a scrie hack css.

• În acest fel, la codul css normal se adaugă „\9”, doar browserul IE îl poate recunoaște, alte browsere vor ignora această afirmație.
• Acest lucru va realiza diferențierea browserului, permițând scopul browserelor compatibile.

De ce să nu folosiți lățimea: 100%?

Pentru a realiza scalarea automată a imaginilor, puteți utiliza și proprietățile de lățime mai frecvent utilizate, de ex.width：100％.

Totuși, această regulă nu se aplică aici.

• Pentru că această regulă îl va face să pară la fel de larg ca recipientul său.
• În cazurile în care containerul este mult mai lat decât imaginea, imaginea va fi întinsă inutil.

注意 事项

Ce sunt selectoarele CSS? Care este diferența dintre class și id?Următoarele tutoriale vorbesc despre ▼

Care este diferența dintre clasa selector CSS și id? ID-ul și utilizarea clasei în HTML

Care este diferența dintre clasa selector CSS și id? Utilizarea id-ului și a clasei în HTML Chen Weiliang realizează în prezent SEO și optimizează tema WordPress a site-ului.Deși am mai învățat câteva cunoștințe de bază despre HTML și CSS, dar nu l-am folosit de ceva vreme, în special partea CSS...

Cum redă site-ul mobil video MP4 adaptiv la pagină?Vă rugăm să faceți clic pe linkul de mai jos ▼

Cum se adaptează pagina web H5 MP4 la pagină? Site-ul mobil redă cod html video

Marketingul video este o parte integrantă a marketingului online: mulți practicieni de promovare online folosesc adesea videoclipuri combinate cu „marketing viral” pentru a genera trafic.Dacă marketingul WeChat este combinat cu marketingul video, acesta poate îmbunătăți și mai mult rata de conversie la copywriting a noilor media și a comerțului electronic social.Am mulți prieteni...