W3C home > Mailing lists > Public > www-style@w3.org > December 2008

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

From: Dean Jackson <dino@apple.com>
Date: Thu, 4 Dec 2008 05:13:16 +1100
Cc: www-style@w3.org
Message-Id: <111D07CA-C248-4A77-B777-BCEA7E0917CB@apple.com>
To: Philip Jägenstedt <philipj@opera.com>

Hi Philip,

We agree that CSS is the right place to define this behaviour.

What about the 'fit' and 'fit-position' properties from CSS3 Paged


It seems to match SVG's preserveAspectRatio attribute.

Aside: I'm not sure why these are in Paged Media. They seem applicable
to continuous media too.


On 04/12/2008, at 3:38 AM, Philip Jägenstedt wrote:

> 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 18:14:00 UTC

This archive was generated by hypermail 2.3.1 : Monday, 2 May 2016 14:27:42 UTC