אַרטיקל וועגווייַזער
רעכט צו דער בומינג רירעוודיק אינטערנעט,Wechat פֿאַרקויףדי פּאָפּולאַריטעט פון רירעוודיק פאָנעס איז געווארן生活מוזן-האָבן געצייַג.
בויען אַ וועבזייטלמוסטער, עס איז רעקאַמענדיד צו נוצןוואָרדפּרעססאַדאַפּטיוו טעמע פֿאַר:
- אויב דער וואָרדפּרעסס טעמע דעוועלאָפּער האט נישט מאַכן די HTML 5 בילד אַדאַפּטיוו פאַרשטעלן געזונט ווען דיזיינינג די וואָרדפּרעסס טעמע בלאַט ...
- בראַוזינג די וועבזייטל אויף אַ רירעוודיק מיטל, עס וועט זיין אַ זייער מיעס בילד דיסלאָוקיישאַן, און די באַניצער דערפאַרונג איז זייער נעבעך!
וואָס טוט CSS בילד אַדאַפּטיוו מיינען?
CSS בילד זיך-אַדאַפּטיישאַן רעפערס צו מאַכן די בילדער אין די HTML וועב בלאַט, דורך CSS קאָד:
- אויטאָמאַטיש אַדאַפּט צו די ברייט און הייך פון פאַרשידענע דעוויסעס.
- די img קוויטל איז אויטאָמאַטיש סקיילד פּראַפּאָרשאַנאַלי.
ווײַטערChen Weiliangאיך וועל טיילן מיט איר די CSS img פּראַפּאָרשאַנאַל סקיילינג קאָד ^_^
אַדאַפּטיוו קאָד פֿאַר CSS בילד הייך און ברייט
אַרייַנלייגן בילד אין HTML:
אויב איר ווילן די בילד צו אַדאַפּט צו די קליין גרייס פון דעם עקראַן אַנשטאָט פון סטייינג פאַרפעסטיקט אין ברייט און הייך.
איר קענען לייגן די פאלגענדע קאָד צו די style.css טעקע פון דיין וואָרדפּרעסס טעמע ▼
/*图片自适应宽度和高度*/
img { max-width: 100%; height: auto; width: auto\9; width: auto; }דערקלערונג דאָmax-widthמאַקסימום ברייט הערשן
- צו ענשור אַז אַלע בילדער זענען געוויזן אין מאַקסימום 100% (ד"ה זיי קענען בלויז זיין געוויזן ווי גרויס ווי זייער אייגענע בילדער).
- אין דעם פונט, אויב דער עלעמענט מיט די בילד (למשל, דער גוף אָדער דייוו מיט די בילד) איז קלענערער ווי די טאָכיק ברייט פון די בילד, די בילד וועט זיין סקיילד צו פּלאָמבירן די מאַקסימום בנימצא פּלאַץ.
width:auto;מיטל אָטאַמאַטיק ברייט
\9 עס איז אַ וועג פון שרייבן כאַק קסס.
- אין דעם וועג, "\ 9" איז מוסיף צו דער נאָרמאַל קסס קאָד, בלויז IE בלעטערער קענען דערקענען עס, אנדערע בראַוזערז וועט איגנאָרירן דעם ויסזאָגונג.
- דאָס וועט דערגרייכן דיפערענשייישאַן פון בלעטערער, געבן די ציל פון קאַמפּאַטאַבאַל בראַוזערז.
פארוואס נישט נוצן ברייט: 100%?
צו דערגרייכן אָטאַמאַטיק סקיילינג פון בילדער, איר קענען אויך נוצן די מער קאַמאַנלי געוויינט ברייט פּראָפּערטיעס, למשל.width：100％.
אָבער, דעם הערשן טוט נישט צולייגן דאָ.
- ווייַל דעם הערשן וועט מאַכן עס דערשייַנען ווי ברייט ווי זייַן קאַנטיינער.
- אין קאַסעס ווען דער קאַנטיינער איז פיל ברייט ווי די בילד, די בילד וועט זיין אויסגעשטרעקט אַננעסאַסעראַלי.
注意 事项
וואָס זענען CSS סעלעקטאָרס? וואָס איז די חילוק צווישן קלאַס און ID?די פאלגענדע טוטאָריאַלז רעדן וועגן ▼
ווי קען די רירעוודיק וועבזייטל שפּיל MP4 ווידעא אַדאַפּטיוו צו די בלאַט?ביטע גיט די לינק אונטן ▼
Hope Chen Weiliang בלאָג ( https://www.chenweiliang.com/ ) שערד "וועב בלאַט HTML 5 בילד אַדאַפּטיוו פאַרשטעלן ימג פּראַפּאָרשאַנאַל סקיילינג קאָד", וואָס איז נוציק פֿאַר איר.
ברוכים הבאים צו טיילן דעם לינק פון דעם אַרטיקל:https://www.chenweiliang.com/cwl-964.html
ברוכים הבאים צו די טעלעגראַם קאַנאַל פון Chen Weiliang ס בלאָג צו באַקומען די לעצטע דערהייַנטיקונגען!
📚 דער פירער כּולל ריזיק ווערט, 🌟 דאָס איז אַ זעלטן געלעגנהייט, טאָן ניט פעלן עס! ⏰⌛💨
ייַנטיילן און ווי אויב איר ווילט!
דיין ייַנטיילונג און לייקס זענען אונדזער קעסיידערדיק מאָוטאַוויישאַן!