מספר מילים על התכונה object-fit ב CSS

לבטח נתקלתם בסיטואציה בה רציתם כי תמונה תתאים בדיוק למימדים מסויימים אך רציתם לשמור על יחס רוחב/גובה (aspect ratio) של אותה תמונה ובכך למנוע מצב בו התמונה ״נמעכת״.

אם אינכם יודעים, זו לא הייתה פעולה פשוטה לביצוע עם CSS למשך המון המון זמן…

אחד הטריקים היה להשתמש ב background-image בכדי לעקוף את הבעיה. אך השימוש ב background-image נועד עבור תמונות דקורטיביות ולא עבור תמונות השייכות לתוכן. על כל מקרה, הבעיה נפתרה ואינה קיימת יותר בזכות התכונה object-fit.

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

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

הערכים של התכונה object-fit

מעבר לערכים inherit, initial & unset התכונה יכולה לקבל חמישה ערכים:

• contain – התמונה שומרת על יחס רוחב/גובה אך מתאימה עצמה כך שהרוחב או הגובה (הארוך מבינהם) יתאים למימדים הנתונים.
• cover – התמונה שומרת על יחס רוחב/גובה ושטח התמונה יתמלא לגמרי.
• fill – ערך ברירת המחדל. התמונה תמלא את השטח הקיים גם אם זה אומר שיחס הרוחב/גובה יאבד.
• none – התמונה לא תשנה את גודלה בשום צורה וגודל התמונה המקורית ימלא את השטח הנתון.
• scale-down – התמונה תשתנה בגודלה כאילו הערך שבחרתם היה none ו  contain, זאת כאשר הערך שייבחר משני אלו יהיה זה שיציג את גודל האובייקט הקטן מבינהם.

בואו נדגים כי לא פשוט להסביר ערכים אלו בעברית. הרוחב המקורי של התמונה הבאה הוא 1240px והגובה המקורי הוא 793px. בפוסט זה היא מוצגת ב 50% מגודל זה: 620x397px.

אם אנו רוצים שהתמונה תוצג באותו הגובה אך תתאים לחצי מהרוחב אנו בבעיה – יחס הרוחב/גובה יאבד והתוצאה תהיה תמונה מעוכה:

התכונה object-fit יכולה לתקן זאת עבורינו. ניתן מבט על הערכים השונים וההשפעה שלהם על תמונה זו:

object-fit: contain

img {
  object-fit: contain;
}

object-fit: cover

img {
  object-fit: cover;
}

object-fit: fill

img {
  object-fit: fill;
}

object-fit: none

img {
  object-fit: none;
}

object-fit: scale-down

img {
  object-fit: scale-down;
}

בדוגמאות הספציפיות שהצגנו כנראה ו object-fit : cover יהיה המועמד המתאים ביותר.

התכונה object-position

נאמר וביצעתם קיצוץ לתמונה במאצעות object-fit אך החלק של התמונה שמוצג אינו ממוקם במיקום שאתם חושקים בו. ניתן להשתמש בתכונה object-position בכדי לשלוט בכך.

ניתן מבט על הדוגמה שהצגנו קודם בה object-fit: cover:

img {
  object-fit: cover;

  width: 310px;
  height: 397px;
}

כעת בואו נשנה את המיקום בציר ה X של החלק הגלוי לעין בתמונה כך שנראה את מרבית חלקה הימני:

img {
  object-fit: cover;
  object-position: 100% 0;

  width: 310px;
  height: 397px;
}

אם נספק ערכים מחוץ לגבולות זה מה שנקבל:

img {
  object-fit: cover;
  object-position: -20% 0;

  width: 310px;
  height: 397px;
}

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

כפי שאתם שמים לב התמיכה בתכונה זו מאד רחבה (נוציא את IE מהתמונה). כל הדפדפנים המודרניים תומכים בתכונה object-fit בצורה מלאה.