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:
>>
>>> http://www.jwz.org/blog/2012/07/non-bouncy-layouts/ 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
http://css-3d.org/
http://css-class.com/

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