The CSS Propertie object-fit

המאפיין object-fit קובע איך התוכן של אלמנט מוחלף (replaced) כגון <img> או <video> ימותח/יותאם בתוך תיבת התוכן שלו — בדומה ל-background-size לרקעים.

img { object-fit: cover; }

.thumbnail { object-fit: contain; background: #f0f0f0; }

fillהתוכן נמתח כדי למלא את כל תיבת התוכן (ערך ברירת המחדל). יחס הגובה-רוחב המקורי לא נשמר.

containהתוכן מותאם כך שייכנס כולו לתיבה תוך שמירה על יחס הגובה-רוחב; ייתכן רווח ריק (letterboxing).

coverהתוכן מותאם כדי לכסות את כל התיבה תוך שמירה על יחס הגובה-רוחב; חלקים יכולים להיחתך.

noneהתוכן לא מותאם — נשאר בגודל המקורי שלו; ייתכן חיתוך או רווח לבן.

scale-downתוכן בגודל המינימלי בין none ל-contain — שומר על יחס וגם לא מגדיל מעבר לגודל המקורי.

CSS Images Module Level 3

Editor's Draft

Show all code