כדאי לנסות את ההדגמה הזו
- כדי לראות תצוגה מקדימה של האתר, לוחצים על הצגת האפליקציה. לאחר מכן לוחצים על
מסך מלא
. - טוענים מחדש את האפליקציה בדפדפנים בגדלים שונים. שימו לב עד כמה התמונות שונות הם: לא רק גדלים שונים, אלא גם חיתוכים שונים יחסי גובה-רוחב.
מה קורה פה?
כיוון הצילום מציגה תמונות שונות בגדלים שונים.
תמונה רספונסיבית טוענת את אותה תמונה בגדלים שונים. לוקחים את הכיוון האומנותי בשלב הזה וטוען תמונות שונות לגמרי, בהתאם מסך.
אפשר להשתמש בכיוון הצילום כדי לשפר את ההצגה החזותית. לדוגמה, הפורמט שונה באמצעות חיתוך התמונה בהדגמה הזו, אנחנו מוודאים שנקודת העניין (הפרח) מוצגת תמיד בפירוט, ללא קשר לתצוגה. היתרונות של כיוון האמנות הם אסתטיקה בלבד, הוא לא מספק ביצועים טובים בהשוואה לתמונות רספונסיביות.
הצגת הקוד
- אפשר להציג את
index.htmlכדי לראות את קוד הכיוון של התמונה בהדגמה הזו.
איך הקוד פועל
כיוון העיצוב משתמש
<picture>,
<source>,
ו-<img> תגים.
תמונה
התג <picture> מספק wrapper לאפס תגי <source> או יותר ולתג <image> אחד.
מקור
התג <source> מציין משאב מדיה.
הדפדפן משתמש בתג <source> הראשון עם שאילתת מדיה
שמחזירה את הערך True. אם אף אחת משאילתות המדיה לא תואמת, הפרמטר
הדפדפן יחזור לטעון את התמונה שצוינה ב-<img>.
.
img
התג <img> מאפשר לקוד הזה לפעול בדפדפנים שלא
תומכים בתג <picture>.
אם הדפדפן לא תומך בתג <picture>, הוא טוען את
תמונה שצוינה על ידי התג <img>.