מאפיין CSS חדש עם יחס גובה-רוחב נתמך ב-Chromium, בתצוגה המקדימה של הטכנולוגיה של Safari וב-Firefox ללילה

נכס ה-CSS החדש שעוזר לשמור על ריווח בפריסות רספונסיביות.

Una Kravets

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

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

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

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

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

פתרון מקובל לדפדפנים שונים לשמירה על יחס גובה-רוחב בהתבסס על הרוחב נקרא "האיק עם ריפוד עליון". לפתרון הזה נדרש קונטיינר הורה ו מיכל צאצא במיקום מוחלט. אפשר לחשב את יחס הגובה-רוחב באחוזים בתור 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 ו-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 היא שהוא יכול ליצור placeholder של placeholder שינוי משמעותי בפריסה ומספק מדדי ביצועים באינטרנט טובים יותר. בתרחיש הזה לדוגמה, טעינה של נכס מ-API, כמו Unbounce, יוצרת שינוי הפריסה כשטעינת המדיה תסתיים.

לעומת זאת, באמצעות 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%;
}

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

סיכום

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

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