HTML 5 şəkil adaptiv ekranı HTML XNUMX veb səhifəsi üçün proporsional miqyaslama kodu

Artan mobil internet sayəsində,Wechat marketinqiMobil telefonların populyarlığı artdıHəyatolması lazım olan alətdir.

veb sayt qurunşablondan istifadə etmək tövsiyə olunurWordPressÜçün uyğunlaşdırılmış tema:

CSS image adaptiv nə deməkdir?

CSS şəklinin özünə uyğunlaşdırılması, CSS kodu vasitəsilə html veb səhifəsində şəkillərin yaradılmasına aiddir:

Sonrakı,Chen WeiliangMən sizinlə CSS img proporsional miqyaslama kodunu paylaşacağam ^_^

CSS təsvirin hündürlüyü və eni üçün uyğunlaşma kodu

Html-ə şəkil daxil edin:

Şəkilin eni və hündürlüyündə sabit qalmaq əvəzinə ekranın kiçik ölçüsünə uyğunlaşmasını istəyirsinizsə.

Aşağıdakı kodu WordPress temanızın style.css faylına əlavə edə bilərsiniz ▼

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

burada bəyanatmax-widthmaksimum genişlik qaydası

• bütün şəkillərin maksimum 100% göstərilməsini təmin etmək üçün (yəni onlar yalnız öz şəkilləri qədər böyük göstərilə bilər).
• Bu nöqtədə, təsviri ehtiva edən element (məsələn, təsviri ehtiva edən gövdə və ya div) şəklin özünəməxsus genişliyindən kiçikdirsə, mümkün olan maksimum boşluğu doldurmaq üçün şəkil miqyaslanacaq.

width:auto;avtomatik genişlik deməkdir

\9 Bu css hack yazmağın bir yoludur.

• Bu şəkildə normal css koduna "\9" əlavə edilir, yalnız IE brauzeri onu tanıya bilər, digər brauzerlər bu ifadəyə məhəl qoymayacaqlar.
• Bu, uyğun brauzerlərin məqsədini təmin edərək, brauzerin fərqləndirilməsinə nail olacaq.

Niyə eni istifadə etmirsiniz: 100%?

Şəkillərin avtomatik miqyasına nail olmaq üçün siz daha çox istifadə olunan genişlik xüsusiyyətlərindən də istifadə edə bilərsiniz, məsələn.width：100％.

Lakin bu qayda burada tətbiq edilmir.

• Çünki bu qayda onu qabı qədər geniş göstərəcək.
• Konteynerin təsvirdən daha geniş olduğu hallarda, şəkil lazımsız yerə uzanacaq.

注意 事项

CSS seçiciləri nədir? Sinif və id arasındakı fərq nədir?Aşağıdakı dərsliklər ▼ haqqında danışır

CSS selektor sinfi ilə id arasındakı fərq nədir? HTML-də id və sinif istifadəsi

CSS seçici sinfi ilə id arasındakı fərq nədir? HTML-də id və sinifdən istifadə Chen Weiliang hazırda SEO-nu həyata keçirir və veb saytın WordPress mövzusunu optimallaşdırır.Baxmayaraq ki, mən əvvəllər bəzi əsas HTML və CSS biliklərini öyrənmişəm, lakin bir müddətdir ki, işləmirəm, xüsusən də CSS hissəsini...

Mobil veb sayt səhifəyə uyğun MP4 videonu necə oynayır?Aşağıdakı linkə klikləyin ▼

H5 veb səhifəsi MP4 səhifəyə necə uyğunlaşır?Mobil vebsayt video html kodunu oynayır

Video marketinq onlayn marketinqin ayrılmaz hissəsidir: bir çox onlayn təşviqat praktikantları trafiki artırmaq üçün tez-tez "viral marketinq" ilə birlikdə videodan istifadə edirlər.WeChat marketinqi video marketinqlə birləşdirilərsə, bu, yeni media və sosial e-ticarətin kopirayterin çevrilmə sürətini daha da yaxşılaşdıra bilər.Mənim çox dostlarım var...