scaling behavior of HTML <img>/<video> and SVG preserveAspectRatio

Hi,

I've been working on implementing HTML 5 <video> in Opera and after
recent discussions on the WHATWG list[1] about the pixelratio attribute
in the specific and more generally the difference between <img> and
<video> I believe formalizing and expressing these differences in CSS
would be for the best (first suggested by Martin Atkins[2]).

As you know, <img style="width: 100px; height: 100px;"> would cause
the image to stretch to fill the content box of 100x100 px, distorting
the image if the original is not square.

<video style="width: 100px; height: 100px;"> also causes the content box
to be 100x100 px, but the video is scaled while preserving its ratio so
that it fits precisely inside the box, resulting in letterboxing or
pillarboxing if the original video is not square.[3]

Furthermore, SVG has the preserveAspectRatio[4] attribute for some
elements, including <image> and <video>, but it cannot be set with CSS.
Using this attribute one can achieve both the stretch behavior ("none";
like HTML <img>), the aspect-preserving behavior ("meet"; like HTML
<video>) and additionally "slice" which also preserves aspect but zooms
and crops instead.

I would like to suggest introducing something similar to
preserveAspectRatio in CSS along the following lines:

1. A new "preserve-aspect-ratio" property which can take the values
"none", "meet" and "slice". I'm not sure what the overflow behavior for
slice should be, this needs discussion. An alternative naming scheme for
this property might be "scaling" with values "stretch", "aspect-min" and
"aspect-max".

2. A new content-position property similar to background-position which
does has the same function as the align portion of the SVG
preserveAspectRatio attribute. This would only take effect if the above
property is "meet" or "slice".

For HTML these properties only make sense for replaced content with an
intrinsic size and the default style would be

<img style="preserve-aspect-ratio:none">

<video style="preserve-aspect-ratio: meet; content-position: 50% 50%">

In SVG the default behavior for both <image> and <video> appears to be

<??? style="preserve-aspect-ratio: meet; content-position: 50% 50%">

I believe that moving this to the CSS level would have several positive
effects, such as being able to use the <img> model for <video> and vice
versa. We are considering implementing something like this, but would
like to hear some feedback on the idea first.

[1] discussion of the pixelratio attribute began at
http://lists.whatwg.org/htdig.cgi/whatwg-whatwg.org/2008-October/016588.html
and eventually resulted in its removal in
http://lists.whatwg.org/pipermail/whatwg-whatwg.org/2008-December/017625.html 

[2]
http://lists.whatwg.org/pipermail/whatwg-whatwg.org/2008-December/017638.html

[3]
http://www.whatwg.org/specs/web-apps/current-work/multipage/video.html#dom-video-videowidth

[4]
http://www.w3.org/TR/SVG/coords.html#PreserveAspectRatioAttribute

-- 
Philip Jägenstedt
Opera Software

Received on Wednesday, 3 December 2008 16:39:39 UTC