תכונת aspect-ratio ב-CSS: מדריך ויזואלי עם דוגמאות חיות

התכונה aspect-ratio ב-CSS מאפשרת להגדיר את היחס בין רוחב לגובה של אלמנט. במקום לקבוע את שני המימדים בצורה מפורשת, מגדירים את היחס והדפדפן מחשב את המימד השני באופן אוטומטי.

זה שימושי בכל מקום – תמונות רספונסיביות, מקומות שמורים לווידאו, פריסות כרטיסים, פריטי Grid ו-Skeleton Loaders. אם נתקלתם בבעיות שינויי פריסה (CLS) שנגרמים מתמונות שנטענות ללא מקום שמור, aspect-ratio הוא הפתרון המודרני.

מה זה Aspect Ratio?

יחס ממדים (Aspect Ratio) הוא היחס בין רוחב לגובה. כנראה ראיתם את המספרים האלה בעבר: 16:9 לווידאו רחב, 4:3 למסכים ישנים, 1:1 לתמונות מרובעות.

כשכותבים aspect-ratio: 16 / 9 ב-CSS, מורים לדפדפן: "על כל 16 יחידות רוחב, השתמש ב-9 יחידות גובה." הדפדפן מבצע את החישוב.

הנה היחסים הנפוצים ביותר:

ושני יחסים פחות נפוצים אך עדיין שימושיים:

התחביר

התכונה מקבלת כמה סוגי ערכים:

/* Width / Height ratio */
.element {
  aspect-ratio: 16 / 9;
}

/* Single number (treated as ratio to 1) */
.square {
  aspect-ratio: 1;  /* same as 1 / 1 */
}

/* Auto - use the element's intrinsic ratio */
.natural {
  aspect-ratio: auto;
}

/* Auto with fallback ratio */
.image {
  aspect-ratio: auto 3 / 2;
}

שווה לשים לב לתחביר auto 3 / 2. עבור אלמנטים מוחלפים כמו <img> ו-<video>, זה אומר לדפדפן להשתמש ביחס הטבעי של האלמנט אם הוא זמין, ואם לא (למשל בזמן שהתמונה נטענת) להשתמש ב-3/2 כברירת מחדל.

כיצד התכונה עובדת עם רוחב וגובה

התכונה פועלת רק כשלפחות מימד אחד הוא גמיש. אם הגדרתם גם width וגם height בצורה מפורשת, ל-aspect-ratio אין השפעה.

/* This works - height is calculated from width + ratio */
.box {
  width: 300px;
  aspect-ratio: 16 / 9;
  /* height = 300 * (9/16) = 168.75px */
}

/* This also works - width is calculated from height + ratio */
.tall {
  height: 200px;
  aspect-ratio: 4 / 3;
  /* width = 200 * (4/3) = 266.67px */
}

/* No effect - both dimensions are already set */
.fixed {
  width: 300px;
  height: 200px;
  aspect-ratio: 1 / 1;  /* ignored */
}

כאשר גם width וגם height מוגדרים, הערכים המפורשים גוברים. aspect-ratio משמש רק לחישוב מימד חסר.

מקרי שימוש מעשיים

נעבור על התרחישים בהם aspect-ratio עושה הבדל משמעותי.

תמונות רספונסיביות ללא CLS

תמונות ללא מימדים מוגדרים גורמות לשינויי פריסה בזמן הטעינה. בעבר היינו מגדירים מאפייני width ו-height על תגית ה-<img>. עם aspect-ratio אפשר לטפל בזה ישירות ב-CSS:

img {
  width: 100%;
  height: auto;
  aspect-ratio: auto 16 / 9;
}

מילת המפתח auto מורה לדפדפן להשתמש ביחס הטבעי של התמונה לאחר הטעינה. היחס 16 / 9 משמש כברירת מחדל בזמן הטעינה, ושומר את המקום המתאים.

מקומות שמורים לווידאו והטמעות

סרטונים מוטמעים ו-iframes ידועים כגורמים לשינויי פריסה. ניתן להשתמש ב-aspect-ratio ליצירת מקום שמור שתואם את המימדים המדויקים:

.video-wrapper {
  width: 100%;
  aspect-ratio: 16 / 9;
  background: #1a1e27;
}

.video-wrapper iframe {
  width: 100%;
  height: 100%;
}

כך נראה אותו מקום שמור:

דפוס זה עובד היטב עם הטמעות בטעינה עצלה שבהן ה-iframe נטען רק כשהמשתמש מקיים אינטראקציה עם המקום השמור.

פריסות כרטיסים ב-Grid

כשבונים פריסת CSS Grid עם כרטיסים, לעתים קרובות רוצים שתמונות ממוזערות או פריטי כרטיסים ישמרו על צורה אחידה. ללא aspect-ratio, צריך להסתמך על טריקים עם padding או גבהים קבועים.

נסו לשנות את גודל חלון הדפדפן – פריטי Grid אלה שומרים על היחס המרובע בכל רוחב מסך:

ה-CSS מינימלי:

.grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
  gap: 12px;
}

.grid-item {
  aspect-ratio: 1 / 1;
}

Skeleton Loaders

מסכי Skeleton (מקומות שמורים בזמן טעינה) צריכים להתאים למימדי התוכן הסופי. aspect-ratio הופך את זה לפשוט – המקום השמור לתמונה ממוזערת תואם את יחס התמונה הסופית:

.skeleton-thumb {
  width: 100%;
  aspect-ratio: 16 / 9;
  background: linear-gradient(90deg, #1f2430 25%, #262c3a 50%, #1f2430 75%);
  background-size: 200% 100%;
  animation: shimmer 1.5s infinite;
}

@keyframes shimmer {
  0% { background-position: -200% 0; }
  100% { background-position: 200% 0; }
}

Aspect Ratio מול טריק ה-Padding

לפני שהתכונה aspect-ratio הייתה קיימת, הפתרון המקובל היה "טריק ה-padding-top". היינו מחשבים את האחוז מהיחס ומגדירים אותו כ-padding:

/* Old padding hack for 16:9 */
.wrapper {
  position: relative;
  padding-top: 56.25%;  /* 9 / 16 = 0.5625 */
  height: 0;
}

.wrapper > * {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

/* Modern approach */
.wrapper {
  aspect-ratio: 16 / 9;
}

טריק ה-padding דרש אלמנט עוטף, מיקום אבסולוטי וחישוב ידני של אחוזים מיחסים. aspect-ratio עושה את אותו הדבר בשורה אחת.

אם עדיין צריך לתמוך ב-Internet Explorer (שלא תומך ב-aspect-ratio), השתמשו בטריק ה-padding כ-fallback. לכל שאר הדפדפנים, aspect-ratio בטוח לשימוש.

שילוב עם Object-fit

בשימוש ב-aspect-ratio על תמונות, לעתים קרובות משלבים אותו עם תכונת object-fit. אם המימדים הטבעיים של התמונה לא תואמים את היחס שהוגדר, object-fit שולט באופן שבו התמונה ממלאת את המקום:

img {
  width: 100%;
  aspect-ratio: 1 / 1;
  object-fit: cover;   /* crops to fill */
}

img.contain {
  object-fit: contain;  /* fits inside, may show gaps */
}

object-fit: cover הוא הבחירה הנפוצה – הוא ממלא את כל המקום תוך חיתוך של מה שחורג. contain מתאים את התמונה מבלי לחתוך, אבל עלול להשאיר אזורים ריקים.

תמיכת דפדפנים

aspect-ratio נכנס ל-CSS Baseline בספטמבר 2021. כל הדפדפנים המרכזיים תומכים בו:

• Chrome/Edge: גרסה 88+ (2020)
• Firefox: גרסה 89+ (2021)
• Safari: גרסה 15+ (2021)

התמיכה הגלובלית עומדת על למעלה מ-96%. הדפדפן היחיד שלא תומך הוא Internet Explorer, שהגיע לסוף חייו ביוני 2022.

שאלות נפוצות

שאלות נפוצות על תכונת aspect-ratio ב-CSS:

לסיכום

התכונה aspect-ratio ב-CSS מחליפה שנים של טריקים עם padding בהצהרה אחת וקריאה. היא עובדת עבור תמונות, סרטונים, פריטי Grid, מסכי Skeleton וכל אלמנט שצריך לשמור על פרופורציות קבועות. עם למעלה מ-96% תמיכת דפדפנים, אין סיבה שלא להשתמש בה בפרודקשן כבר היום. להנפשת custom properties ואפקטי gradient, ראו את המדריך לתכונת @property ב-CSS.