וידאו רקע

The object-fit CSS property specifies how the contents of a replaced element should be fitted to the box established by its used height and width (from MDN).

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

איך ניתן לקצוץ תמונות עם CSS? כיצד ניתן לגרום לוידאו להמתח ולמלא את הקונטיינר בו הוא נמצא?

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

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

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

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

בפני עצמה, תכונה זו מאפשרת לנו לקצוץ (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 בצורה מלאה.

רועי יוסף
רועי יוסף

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

5תגובות...
  • מאור 20 באוגוסט 2019, 21:27

    אחלה מדריך ואחלה אופציה.
    עושה את החיים קלים.

  • מאור הרוש 20 באוגוסט 2019, 23:44

    מברוק על עיצוב האתר, ממש אהבתי!

  • אמיר 17 בספטמבר 2019, 0:34

    תודה על מדריכים מצויינים, לא נתקלתי בבלוג ברמה כזו בעברית עדיין.

השאירו תגובה

פעימות
Up!