Uebfaqja HTML 5 e imazhit të ekranit adaptues img kodi i shkallëzimit proporcional

Me zhvillimin e shpejtë të internetit celular dhe përdorimin e gjerë të marketingut WeChat , telefonat celularë janë bërë një mjet thelbësor në jetë .

Për shabllonet e faqeve të internetit, ne rekomandojmë përdorimin e temave që i përshtaten WordPress-it :

Çfarë do të thotë përshtatje imazhi CSS?

CSS imazh adaptive do të thotë për të bërë imazhet në faqen e internetit html, përmes kodit CSS:

Më pas, Chen Weiliang do të ndajë me ju kodin CSS për shkallëzimin proporcional të madhësisë së një imazhi. ^_^

Kodi përshtatës i lartësisë dhe gjerësisë së imazhit CSS

Fut imazhin në html:

Nëse dëshironi që imazhi të përshtatet me madhësinë e vogël të ekranit në vend që të qëndrojë i fiksuar në gjerësi dhe lartësi.

Ju mund të shtoni kodin e mëposhtëm në skedarin style.css të temës suaj të WordPress ▼

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

deklaratë këtumax-widthrregulli i gjerësisë maksimale

• për të siguruar që të gjitha imazhet të shfaqen në maksimum 100% (d.m.th. ato mund të shfaqen vetëm aq të mëdha sa imazhet e tyre).
• Në këtë pikë, nëse elementi që përmban imazhin (për shembull, trupi ose div që përmban imazhin) është më i vogël se gjerësia e brendshme e imazhit, imazhi do të shkallëzohet për të mbushur hapësirën maksimale të disponueshme.

width:auto;do të thotë gjerësi automatike

\9 Është një mënyrë për të shkruar hack css.

• Në këtë mënyrë, "\9" i shtohet kodit normal css, vetëm shfletuesi IE mund ta njohë atë, shfletuesit e tjerë do ta injorojnë këtë deklaratë.
• Kjo do të arrijë diferencimin e shfletuesit, duke mundësuar qëllimin e shfletuesve të pajtueshëm.

Pse të mos përdorni gjerësinë: 100%?

Për të arritur shkallëzimin automatik të imazheve, mund të përdorni edhe vetitë e gjerësisë që përdoren më shpesh, p.sh.width：100％.

Megjithatë, ky rregull nuk zbatohet këtu.

• Sepse ky rregull do ta bëjë atë të duket aq i gjerë sa ena e tij.
• Në rastet kur kontejneri është shumë më i gjerë se imazhi, imazhi do të shtrihet pa nevojë.

注意 事项

Çfarë janë përzgjedhësit CSS? Cili është ndryshimi midis klasës dhe ID-së?Udhëzimet e mëposhtme flasin për ▼

🔗Cili është ndryshimi midis klasës së përzgjedhësit CSS dhe ID-së? Përdorimi i id dhe klasës në HTML

Si e luan uebfaqja celulare video MP4 e përshtatur me faqen?Ju lutemi klikoni lidhjen më poshtë ▼

🔗Si ta përshtatni faqen e internetit H5 MP4 me faqen kodin HTML për të luajtur video në faqet e internetit të celularit