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

On May 23, 2011, at 4:19 PM, Tab Atkins Jr. wrote:

> We have an issue in the Image Values spec about precisely what the
> image-resolution property applies to.  There are two possibilities:
> 
> 1) image-resolution only applies to replaced elements, and only
> affects their content.
> 
> 2) image-resolution applies to all elements, and affects all images
> used on them: content images, background images, etc.

I had always assumed the #2 was the main reason to have it. It has come up in old discussions about border-image, for instance.

> 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(). 

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.)

Received on Tuesday, 24 May 2011 14:25:24 UTC