Re: [css3-images] What does image-resolution apply to?

On Tue, May 24, 2011 at 7:24 AM, Brad Kemper <brad.kemper@gmail.com> wrote:
> On May 23, 2011, at 4:19 PM, Tab Atkins Jr. wrote:
>> You can use the image() function to change the resolution of images
>> used in CSS properties, so we don't actually lose any power if we go
>> with #1.
>
> I didn't realize that. Well, that image() function does a lot, huh? I guess it is a better fallback strategy though to have it in image().

Yeah, image() does do a hell of a lot.  I'm not particularly happy
about the overloading there, but I'd be even less happy with them
being separate tagging functions that need to be nested.  (I kinda
want an @-rule that can apply various things as descriptors, but that
would be even *more* unwieldy.)

> I also didn't realize that image-resolution applied to replaced elements in markup (i.e. <img>). How does that work if the width and height of the image are already affecting the resolution? What does it mean if I have a 400 x 400 pixel image created in PhotoShop, and have { width:1in; height:1in; image-resolution:72dpi }? Assuming the image isn't being resampled, which one wins?
>
> This is also a question about background size. Suppose that with that same 400 x 400 raster image I have { background-image: image('400x400.png' 10dpi); background-size: 1in 1in; }? What are the final sizes of the rendered image pixels? 1/10" or 1/400"?
>
> Perhaps in both cases, you are just adjusting a sort of "late intrinsic" resolution that is then overridden by width and height declarations? If so, I think you need to say so. (Apologies, if you do somewhere already, and I just missed it.)

I don't think it's clearly stated how this works, so I should fix
that.  The intent is that it affects the intrinsic size.

So, in your first example (400x400 pixel image at 72dpi, sized to 1in
by 1in), you first apply the resolution.  This gives you a native
image size of 533px (or 5.55in), which is then scaled down to 1in by
1in.  Your second example is similar, though more extreme given the
tiny dpi.

~TJ

Received on Tuesday, 24 May 2011 16:43:17 UTC