מאפיין יחס הגובה-רוחב של שירות CSS

מאפיין ה-CSS שעוזר לשמור על המרווחים בפריסות רספונסיביות.

Una Kravets

יחס גובה-רוחב

בדרך כלל, יחס הגובה-רוחב מתבטא בשני מספרים שלמים ונקודתיים במידות: width:height או x:y. יחסי הגובה-רוחב הנפוצים ביותר בצילום הם 4:3 ו-3:2, בעוד שסרטונים ומצלמות חדשות יותר לצרכן נוטים להיות ביחס גובה-רוחב של 16:9.

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

כמה דוגמאות למקומות שבהם חשוב לשמור על יחס גובה-רוחב:

• יצירת מסגרות iframe רספונסיביות, כאשר הן עומדות על 100% מהרוחב של ההורה, והגובה צריך להישאר ביחס תצוגה ספציפי
• יצירת קונטיינרים מובנים של placeholder לתמונות, לסרטונים ולהטמעות כדי למנוע סידור מחדש כשהפריטים נטענים ומשתמשים במקום
• יצירת מרחב אחיד ורספונסיבי להמחשות נתונים אינטראקטיביות או אנימציות SVG
• יצירת מרחב אחיד ורספונסיבי לרכיבים עם כמה רכיבים, כמו כרטיסים או תאריכים ביומן
• יצירת מרחב אחיד ורספונסיבי לכמה תמונות בגדלים שונים (אפשר להשתמש בו לצד object-fit)

התאמה לאובייקט

הגדרת יחס גובה-רוחב עוזרת לנו לקבוע את הגודל של המדיה בהקשר של תצוגה רספונסיבית. כלי נוסף בקטגוריה הזו הוא המאפיין object-fit, שמאפשר למשתמשים לתאר איך אובייקט (כמו תמונה) בתוך בלוק צריך למלא את הבלוק הזה:

הערכים initial ו-fill מאפשרים להתאים מחדש את התמונה כך שתתאים למרחב. בדוגמה שלנו, התמונה הזו גורמת לכיווץ ולטשטוש של התמונה, כי היא מבצעת התאמה מחדש של הפיקסלים. לא אידיאלי. object-fit: cover משתמש במידה הקטנה ביותר של התמונה כדי למלא את המרחב, וחותוך את התמונה כך שתתאים למרחב על סמך המידה הזו. הוא 'מתקרב' בגבול הנמוך ביותר שלו. הערך object-fit: contain מבטיח שתמיד תראו את כל התמונה, בניגוד לערך cover שבו התמונה תתאים לגודל הגבול הגדול ביותר (בדוגמה שלמעלה זהו רוחב) וגודל התמונה ישתנה כדי לשמור על יחס הגובה-רוחב הטבעי שלה. במקרה object-fit: none, התמונה חתוכה במרכז (מיקום ברירת המחדל של האובייקט) בגודל הטבעי שלה.

object-fit: cover נוטה לעבוד ברוב המצבים כדי לשמור על ממשק אחיד ונוח כשמשתמשים בתמונות במידות שונות, אבל מאבדים מידע בצורה הזו (התמונה נחתכת בקצוות הארוכים ביותר).

אם הפרטים האלה חשובים (לדוגמה, כשעובדים עם פריסת מוצרים לצילום, flat lay), אי אפשר לחתוך תוכן חשוב. לכן, התרחיש האידיאלי הוא תמונות רספונסיביות בגדלים שונים שמתאימים לשטח של ממשק המשתמש ללא חיתוך.

הפריצה הישנה: שמירה על יחס גובה-רוחב באמצעות padding-top

כדי לשפר את הרספונסיביות, נוכל להשתמש ביחס גובה-רוחב. כך אנחנו יכולים להגדיר יחס גובה-רוחב ספציפי ולהתבסס על ציר בודד (גובה או רוחב) לשאר המדיה.

פתרון מקובל כרגע בכל הדפדפנים לשמירה על יחס גובה-רוחב על סמך רוחב התמונה נקרא 'Padding-Top Hack'. כדי להשתמש בפתרון הזה, צריך קונטיינר הורה וקונטיינר צאצא שממוקם באופן מוחלט. במקרה כזה, המערכת תחשב את יחס הגובה-רוחב כאחוז כדי להגדיר את הערך padding-top. לדוגמה:

• יחס גובה-רוחב של 1:1 = padding-top: 100% = 1 / 1
• יחס גובה-רוחב 4:3 = 3 / 4 = 0.75 = padding-top: 75%
• יחס גובה-רוחב של 3:2 = padding-top: 66.67% / 3 = 0.66666
• יחס גובה-רוחב של 16:9 = 9 / 16 = 0.5625 = padding-top: 56.25%

עכשיו, אחרי שזיהינו את ערך יחס הגובה-רוחב, אנחנו יכולים להחיל אותו על מאגר האב. דוגמה:

<div class="container">
  <img class="media" src="..." alt="...">
</div>

לאחר מכן נוכל לכתוב את הקוד הבא ב-CSS:

.container {
  position: relative;
  width: 100%;
  padding-top: 56.25%; /* 16:9 Aspect Ratio */
}

.media {
  position: absolute;
  top: 0;
}

שמירה על יחס גובה-רוחב באמצעות aspect-ratio

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

בעזרת אותם תגי עיצוב, אפשר להחליף את: padding-top: 56.25% ב-aspect-ratio: 16 / 9, ולהגדיר את aspect-ratio ליחס מסוים של width ל-height.

.container {
  width: 100%;
  padding-top: 56.25%;
}

.container {
  width: 100%;
  aspect-ratio: 16 / 9;
}

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

המאפיין החדש הזה מאפשר גם להגדיר את יחס הגובה-רוחב ל-auto, כאשר "אלמנטים שהוחלפו ביחס גובה-רוחב מהותי משתמשים ביחס הגובה-רוחב הזה. אחרת, לתיבת הדו-שיח אין יחס גובה-רוחב מועדף". אם מציינים גם את auto וגם את <ratio>, יחס הגובה-רוחב המועדף הוא היחס שצוין: width חלקי height, אלא אם מדובר ברכיב שהוחלף עם יחס גובה-רוחב פנימי. במקרה כזה, ייעשה שימוש ביחס הגובה-רוחב הזה.

דוגמה: עקביות בחלוקה לרשת

הפתרון הזה מתאים גם למנגנוני פריסה של CSS, כמו CSS Grid ו-Flexbox. למשל, כדאי ליצור רשימה עם ילדים שרוצים לשמור על יחס גובה-רוחב של 1:1, למשל רשת של סמלים של נותני חסות:

<ul class="sponsor-grid">
  <li class="sponsor">
    <img src="..." alt="..."/>
  </li>
  <li class="sponsor">
    <img src="..." alt="..."/>
  </li>
</ul>

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

.sponsor img {
  aspect-ratio: 1 / 1;
  width: 100%;
  object-fit: contain;
}

לדוגמה: מניעת שינוי הפריסה

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

לעומת זאת, באמצעות aspect-ratio, נוצר placeholder כדי למנוע את השינוי הזה בפריסה:

img {
  width: 100%;
  aspect-ratio: 8 / 6;
}

טיפ נוסף: מאפייני תמונה ליחס גובה-רוחב

דרך נוספת להגדיר את יחס הגובה-רוחב של תמונה היא באמצעות מאפייני תמונה. אם אתם יודעים מראש את מידות התמונה, השיטה המומלצת היא להגדיר את המימדים האלה בתור width ו-height.

בדוגמה שלמעלה, כשאנחנו יודעים שהמידות הן 800 על 600 פיקסלים, תג העיצוב של התמונה ייראה כך: <img src="image.jpg" alt="..." width="800" height="600">. אם לתמונה שנשלחת יש את אותו יחס גובה-רוחב, אבל לא בהכרח את ערכי הפיקסלים המדויקים האלה, עדיין נוכל להשתמש בערכי מאפייני התמונה כדי להגדיר את היחס, בשילוב עם סגנון width: 100% כדי שהתמונה תתפוס את המרחב המתאים. בסך הכול, זה ייראה כך:

<!-- Markup -->
<img src="image.jpg" alt="..." width="8" height="6">

/* CSS */
img {
  width: 100%;
  height: auto;
}

בסופו של דבר, ההשפעה זהה להגדרת aspect-ratio בתמונה באמצעות CSS, ומונעת את ההזזה המצטברת של הפריסה (דוגמה ב-Codepen).

סיכום

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

תמונות של Amy Shamblen ו-Lionel Gustave דרך Un לשמור.