תמונות רספונסיביות וכיוון האומנות

הרבה פעמים, תמונות רספונסיביות מוטמעות באמצעות המאפיין srcset. המאפיין srcset הוא רשימה של שמות קבצים של תמונות שמופרדים בפסיקים ותיאורי הרוחב או הצפיפות שלהם.

כדי למנוע שינויים בפריסה, צריך להגדיר את המאפיינים width ו-height בתגים <img> ו-<source> שמשתמשים ב-srcset.

מתארי צפיפות

כדי ליצור תמונות רספונסיביות עם תיאורי צפיפות:

• לכל התמונות שרשומות ב-src וב-srcset צריך להיות אותו יחס גובה-רוחב.
• מגדירים את המאפיינים width ו-height כך שיתאימו למידות של התמונה 1x.
• המאפיין src צריך להתייחס לתמונה 1x.

מתארי רוחב

כדי ליצור תמונות רספונסיביות שמשתמשות במתארי רוחב:

• כל התמונות שמופיעות ב-src וב-srcset צריכות להיות באותו יחס גובה-רוחב.
• המאפיינים width ו-height צריכים להתאים למידות של תמונת הגיבוי.
• משנים את סגנון התמונה לפי הצורך. בלי CSS, במקרה שמגדירים width ו-height בתמונה רספונסיבית עם תיאורי רוחב, התמונה תמיד תעובד בגודל שהוגדר. הדבר נכון גם כשלתמונות שמופיעות ב-srcset יש מימדים שונים. יכול להיות שזו לא ההתנהגות שרציתם. הוספת width: 100%; height: auto; או width: 100vw; height: auto; לסגנון התמונה יכולה לספק לכם את המראה הוויזואלי הרצוי.

אלמנטים של תמונה

כדי ליצור רכיבי <picture> רספונסיביים:

• מגדירים את המאפיינים width ו-height לכל תגי <source>. הערכים המתאימים למאפיינים האלה תלויים באופן שבו התג <source> משתמש ב-srcset.
• כדי להתאים את התמונה, יש לעצב את תג <img> המתאים. התג <source> הוא רכיב ריק, ולכן לסגנון אין השפעה.
• מגדירים את המאפיינים width ו-height בתג <img>. הערכים האלה צריכים להתאים לגודל הפנימי של תמונת הגיבוי.

דוגמאות

HTML

<!-- Using density descriptors -->
<img width="480" height="330"
    srcset="cat-1x.jpg, cat-2x.jpg 2x, cat-3x.jpg 3x"
    src="cat-1x.jpg"
    alt="Photo of a cat on a green background">
<!-- Using width descriptors -->    
<img width="256" height="128"
    srcset="dog-256w.jpg 256w, dog-512w.jpg 512w, dog-1028w.jpg 1028w"
    src="dog-256w.jpg"
    alt="Photo of a dog on a orange background">
<!-- Picture tag -->
<picture>
    <source media="(max-width: 720px)" width="600" height="300" srcset="newyork-rectangle.jpg" />
    <source media="(min-width: 721px)" width="600" height="600" srcset="newyork-square-1x.jpg, newyork-square-2x.jpg 2x, newyork-square-3x.jpg 3x" />
    <img src="newyork-rectangle.jpg" width="600" height="300" alt="Photo of the Empire State Building">
</picture>