styleditor.net styleditor.net styleditor.net styleditor.net English accent-coloralignalignment-baselineallanchoranimationappearanceaspect-ratiobackdrop-filterbackface-visibilitybackgroundbaselineblock-sizeborderbottomboxbreakcaption-sidecaretclearclipcolorcolumncolumnscontaincontainercontentcornercountercursorcxcyddirectiondisplaydominant-baselinedynamic-range-limitempty-cellsfield-sizingfillfilterflexfloatfloodfontforced-color-adjustgapgridheighthyphenatehyphensimageime-modeinitial-letterinline-sizeinsetinteractivityinterestinterpolate-sizeisolationjustifyleftletter-spacinglighting-colorlinelistmarginmarkermaskmathmaxminmix-blend-modeobjectobject-fitobject-positionobject-view-boxoffsetopacityorderorphansoutlineoverflowoverlayoverscrollpaddingpagepaint-orderperspectiveplacepointer-eventspositionprint-color-adjustquotesrreadingresizerightrotaterowrubyrulerxryscalescrollscrollbarshapespeakstopstroketab-sizetable-layouttexttimelinetoptouch-actiontransformtransitiontranslatetrigger-scopeunicode-bidiuser-selectvector-effectvertical-alignviewvisibilitywhitewidowswidthwill-changewordwriting-modexyz-indexzoom

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 W3CMDN
Show all code ערוך CSS און-ליין התוסף שזוכר עבורך מאות פריטי CSS כל פרופרטי CSS — בהדגמה חיה מקור הייחוס הדו-לשוני ל-CSS
הגדרהדוגמאותתחבירמודולמפרטמקורות מידעהדגמה חזותית