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

Resolves w3c#1578

Author: LeaVerou

css-images-4/Overview.bs

@@ -1438,7 +1438,111 @@ Gradient Color-Stops</h3>
 Sizing Images and Objects in CSS {#sizing}
 ==========================================
 
-Note: No change from [[css3-images]].
+<!--
+ ███████  ████████        ██ ████████  ██████  ████████         ████████ ████ ████████
+██     ██ ██     ██       ██ ██       ██    ██    ██            ██        ██     ██
+██     ██ ██     ██       ██ ██       ██          ██            ██        ██     ██
+██     ██ ████████        ██ ██████   ██          ██    ███████ ██████    ██     ██
+██     ██ ██     ██ ██    ██ ██       ██          ██            ██        ██     ██
+██     ██ ██     ██ ██    ██ ██       ██    ██    ██            ██        ██     ██
+ ███████  ████████   ██████  ████████  ██████     ██            ██       ████    ██
+-->
+
+Sizing Objects: the 'object-fit' property {#the-object-fit}
+-----------------------------------------------------------
+
+	<pre class='propdef'>
+	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
+	</pre>
+
+	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.
+
+	<dl dfn-type=value dfn-for=object-fit>
+		<dt><dfn>fill</dfn>
+		<dd>
+			The replaced content is sized to fill the element's content box:
+			the object's <a>concrete object size</a> is the element's used width and height.
+
+		<dt><dfn>none</dfn>
+		<dd>
+			The replaced content is not resized to fit inside the element's content box:
+			determine the object's <a>concrete object size</a>
+			using the <a>default sizing algorithm</a> with no specified size,
+			and a <a>default object size</a> equal to the replaced element's used width and height.
+
+		<dt><dfn>contain</dfn>
+		<dd>
+			The replaced content is sized to maintain its aspect ratio
+			while fitting within the element's content box:
+			its <a>concrete object size</a> is resolved as a <a>contain constraint</a>
+			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 <a>concrete object size</a>.
+
+			Note: Both ''object-fit/none'' and ''object-fit/contain'' respect the content's intrinsic aspect ratio,
+			so the concept of "smaller" is well-defined.
+
+		<dt><dfn>cover</dfn>
+		<dd>
+			The replaced content is sized to maintain its aspect ratio
+			while filling the element's entire content box:
+			its <a>concrete object size</a> is resolved as a <a>cover constraint</a>
+			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 <a>concrete object size</a>.
+
+			Note: Both ''object-fit/none'' and ''object-fit/cover'' respect the content's intrinsic aspect ratio,
+			so the concept of "smaller" is well-defined.
+
+		<dt><dfn>scale-down</dfn>
+		<dd>
+			Equivalent to ''contain scale-down''.
+	</dl>
+
+	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.
+
+	<figure>
+		<img src="images/img_scale.png" style="border: thin solid black;" alt="">
+
+		<figcaption>
+			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''.
+		</figcaption>
+	</figure>
+
+	Note: The 'object-fit' property has similar semantics to
+	the <code>fit</code> attribute in [[SMIL10]]
+	and the <<meetOrSlice>> parameter
+	on the <a href="https://www.w3.org/TR/SVG11/coords.html#PreserveAspectRatioAttribute"><code>preserveAspectRatio</code> attribute</a> in [[SVG11]].
+
+	Note: Per the <a>object size negotiation</a> algorithm,
+	the <a>concrete object size</a>
+	(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 <code>&lt;svg></code> element to determine how to draw itself.
 
 Image Processing {#image-processing}
 ====================================