Re: [css4-images] specifying intrinsic size for images that haven't loaded yet

On 29/07/2012 3:21 PM, L. David Baron wrote:
> On Sunday 2012-07-29 15:08 +1000, Alan Gresley wrote:
>> On 29/07/2012 2:22 PM, L. David Baron wrote:
>>> describes a use
>>> case that we should try to address; specifying an *intrinsic size*
>>> for images that aren't loaded yet so that pages don't bounce around
>>> when images load.  This is doable today if you want the images to be
>>> sized to their intrinsic size, but it's not doable today if you want
>>> to scale the images but preserve the intrinsic ratio (for example,
>>> by making them the width of their container).
>> I believe this is what the value 'fill' does with the property
>> 'object-fit' by this algorithm (see point two for 'specified size')
>> [2].
> This is not possible, since 'fill' is the initial value of
> 'object-fit', so it must be compatible with today's behavior.  And
> today's behavior (per CSS 2.1) is that given something like:
>    <img src="..." width="1500" height="1000" style="width: 100%">
> in an 800px wide container, the image will end up being 800px wide
> and 1000px tall, rather than 600px tall.

My wrong, you're correct. I was considering that a specified size was 
only in the CSS and not the HTML.

> If the height="1000" is omitted, then there's no knowledge of the
> intrinsic dimensions prior to the image starting (at least) to load.
> -David

This is partly correct. It will still have an intrinsic ratio (since 
width="1500" is still present). I'm just wondering if 'contain' is what 
you are wanting.

   | The replaced content is sized to maintain its aspect
   | ratio while fitting within the element's content box.

So style="width: 100%" for an replaced element of a aspect ratio of 10:4 
(1000px by 400px) will result in a replaced element being 400px in height.

Alan Gresley

Received on Sunday, 29 July 2012 06:08:24 UTC