ההטמעה של תמונות רספונסיביות מתבצעת בדרך כלל באמצעות המאפיין 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>
: הערכים המתאימים ל-width
ול-height
תלויים באופן שבו התג<source>
ישתמש ב-srcset
. (מידע נוסף על עבודה עםsrcset
מופיע למעלה). - שינוי של עיצוב התמונות: אם צריך להתאים את עיצוב התמונות, חשוב לזכור שלהוספת סגנון לתג
<source>
לא תהיה השפעה – תג<source>
הוא רכיב ריק. במקום זאת, צריך לסגנן את תג<img>
המתאים. - מגדירים את המאפיינים
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>