[css-images-4] Make scale-down a flag for cover/contain

Resolves #1578

Author: LeaVerou

css-images-4/Overview.bs

@@ -1438,7 +1438,111 @@ Gradient Color-Stops
 Sizing Images and Objects in CSS {#sizing}
 ==========================================
 
-Note: No change from [[css3-images]].
+
+
+Sizing Objects: the 'object-fit' property {#the-object-fit}
+-----------------------------------------------------------
+
+	
+	Name: object-fit
+	Value: fill | none | [contain | cover] || scale-down
+	Initial: fill
+	Applies to: replaced elements
+	Inherited: no
+	Percentages: n/a
+	Media: visual
+	Computed value: specified value
+	Animatable: no
+	
+
+	The 'object-fit' property specifies how the contents of a replaced element
+	should be fitted to the box established by its used height and width.
+
+	
+		fill
+		
+			The replaced content is sized to fill the element's content box:
+			the object's concrete object size is the element's used width and height.
+
+		none
+		
+			The replaced content is not resized to fit inside the element's content box:
+			determine the object's concrete object size
+			using the default sizing algorithm with no specified size,
+			and a default object size equal to the replaced element's used width and height.
+
+		contain
+		
+			The replaced content is sized to maintain its aspect ratio
+			while fitting within the element's content box:
+			its concrete object size is resolved as a contain constraint
+			against the element's used width and height.
+
+			If the ''scale-down'' flag is used, size the content as if ''object-fit/none'' or ''object-fit/contain'' were specified,
+			whichever would result in a smaller concrete object size.
+
+			Note: Both ''object-fit/none'' and ''object-fit/contain'' respect the content's intrinsic aspect ratio,
+			so the concept of "smaller" is well-defined.
+
+		cover
+		
+			The replaced content is sized to maintain its aspect ratio
+			while filling the element's entire content box:
+			its concrete object size is resolved as a cover constraint
+			against the element's used width and height.
+
+			If the ''scale-down'' flag is used, size the content as if ''object-fit/none'' or ''object-fit/cover'' were specified,
+			whichever would result in a smaller concrete object size.
+
+			Note: Both ''object-fit/none'' and ''object-fit/cover'' respect the content's intrinsic aspect ratio,
+			so the concept of "smaller" is well-defined.
+
+		scale-down
+		
+			Equivalent to ''contain scale-down''.
+	
+
+	If the content does not completely fill the replaced element's content box,
+	the unfilled space shows the replaced element's background.
+	Since replaced elements always clip their contents to the content box,
+	the content will never overflow.
+	See the 'object-position' property for positioning the object with respect to the content box.
+
+	
+		
+
+		
+			An example showing how four of the values of 'object-fit' cause the replaced element (blue figure)
+			to be scaled to fit its height/width box (shown with a green background),
+			using the initial value for 'object-position'.
+			In this case, ''scale-down'' and ''scale-down contain'' would look identical to ''object-fit/contain'',
+			and ''scale-down cover'' would look identical to ''object-fit/none''.
+		
+	
+
+	Note: The 'object-fit' property has similar semantics to
+	the fit attribute in [[SMIL10]]
+	and the <> parameter
+	on the preserveAspectRatio attribute in [[SVG11]].
+
+	Note: Per the object size negotiation algorithm,
+	the concrete object size
+	(or, in this case, the size of the content)
+	does not directly scale the object itself -
+	it is merely passed to the object as information about the size of the visible canvas.
+	How to then draw into that size is up to the image format.
+	In particular, raster images always scale to the given size,
+	while SVG uses the given size as the size of the "SVG Viewport"
+	(a term defined by SVG)
+	and then uses the values of several attributes on the root <svg> element to determine how to draw itself.
 
 Image Processing {#image-processing}
 ====================================