Məqalələr kataloqu
Mobil internetin sürətlə inkişafı və WeChat marketinqinin geniş yayılması ilə mobil telefonlar həyatda vacib bir vasitəyə çevrilib .
Veb sayt şablonları üçün WordPress-ə uyğun mövzulardan istifadə etməyi məsləhət görürük :
- WordPress tema tərtibatçısı WordPress tema səhifəsini tərtib edərkən HTML 5 təsviri uyğunlaşdıran ekranı yaxşı hazırlamayıbsa...
- Mobil cihazda vebsayta baxarkən, çox çirkin bir şəkil dislokasiyası olacaq və istifadəçi təcrübəsi çox zəifdir!
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:
- Müxtəlif cihazların eninə və hündürlüyünə avtomatik uyğunlaşma.
- img etiketi avtomatik olaraq proporsional olaraq ölçülür.
Daha sonra, Çen Veyliang sizinlə şəklin ölçüsünü mütənasib olaraq miqyaslandırmaq üçün CSS kodunu paylaşacaq. ^_^
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
Mobil veb sayt səhifəyə uyğun MP4 videonu necə oynayır?Aşağıdakı linkə klikləyin ▼
Ümid edirik ki, Chen Weiliang-ın bloqunda ( https://www.chenweiliang.com/ ) paylaşılan "Veb səhifələrdə ekran ölçüsünə və proporsional ölçüyə uyğunlaşmaq üçün HTML 5 şəkil ölçüsünü dəyişdirmə kodu" məqaləsi sizə faydalı olacaq.
Bu məqalənin linkini paylaşmaqdan çəkinməyin: https://www.chenweiliang.com/cwl-964.html