On Sat, Sep 28, 2013 at 4:42 PM, John Mellor <johnme@chromium.org> wrote:
> Q) But my image is neither fixed width nor a percentage of viewport
> width...
>
> A) Yep, this is one thing that's not quite perfect. Say you have a fixed
> 400px sidebar, then two more columns split the remaining viewport width
> between them. Those two columns will be calc(50vw - 200px) wide, but the
> <image-size> grammar only lets you specify a single integer or percentage.
> It would be possible to approximate this width with a series of
> breakpoints, e.g. "0 400px 10% 600px 23% 900px 33% 1400px 39% 2100px 41%"
> (at least only the first part of your srcN would be messy, and you wouldn't
> have to repeat any image urls). But perhaps we should extend srcN to handle
> this case better, by extending the image-size grammar as follows:
>
> <image-size> = <integer> | <percentage> | <percentage> + <integer> |
> <percentage> - <integer>
>
>
> Then you'd be able to express this case more cleanly as: "50% - 200".
>
Something like this might be possible, but honestly I don't think it's
necessary. You don't need to be exact with these things; the point of the
size is to just get it in the right ballpark so the UA can make a correct
decision about which url to load.
In particular, note that percentage differences are pretty unimportant at
small viewport sizes, because the numbers you're resolving it against are
so small. The difference between 10% and 20% at 600px viewport is just
60px, barely relevant for choosing images (or if it is relevant, the image
itself is so small that optimizing for size doesn't get you much of
anything).
So you could get away with just writing down 40% and calling it a day. If
you felt really bad, add a 15% size or something. No need to do 6
different sizes.
~TJ