Re: responsive images

There are already topics in that list about this subject. Please read them before posting a new one.

On 28 Jan 2012, at 16:30, Anselm Hannemann – Novolo Designagentur wrote:

> Right. I didn't saw the draft but it would only work for non-informational images (for design only). 
> Then the first two options are still open:
> - responsive images within HTML (not CSS).
> 
> But then we should change list. This topic will appear shortly in html list, too, when it's approved.
> 
> -Anselm
> 
> Am 28.01.2012 um 16:37 schrieb Chris Kozlowski:
> 
>> Perhaps I'm just not seeing it but I don't think that working draft allows for a responsive image specified by a src attribute in an img tag, eg <img src="resonsive_image.jpg" />. I believe the intent of this is to specify a declarative syntax for referencing an image, the path alias technique I suggested just has the added advantage of being useful in any other place as well. -ck 
>> 
>> On Sat, Jan 28, 2012 at 9:50 AM, Lev Solntsev <greli@mail.ru> wrote:
>> Anselm Hannemann – Novolo Designagentur <anselm@novolo.de> ïèñàë(à) â ñâî¸ì ïèñüìå Sat, 28 Jan 2012 17:22:37 +0400:
>> 
>> [Skipped]
>> 
>> 
>> 3. CSS(4) solution (non-informative content)
>> 
>> This is how a CSS(4) solution could come up with. It is needed for responsive assets which are only for layout not informational content. And as it’s a mess to work with media-queries on that, there came up another approach from Chris Kozlowski. Here’s the proposed syntax:
>> Start with a path override (i used $[path])
>> 
>> $[myimage.jpg] {
>> src-xs: min-device-width(320px) max-device-width(640px) url(myimage_xs.jpg);
>> 
>> src-m: min-device-width(640px) max-device-width(1024px) url(myimage_m.jpg);
>> 
>> src-xl: min-device-width(1024px) url(myimage_xsl.jpg);
>> }
>> using a technique similar to these would result in the images being subject to any preexisting media queries.
>> in the case that a suitable match cannot be found it would just request the initial "myimage.jpg"
>> HTML markup need not change just style sheet changes so image would still look like:
>> you wouldn't have to have to replicate all those attributes in the case of you using myimage.jpg in 15 different img tags
>> since it is a resource alias, it would implicitly work for background images
>> all paths would be relative from style sheet (as the always are)
>> there's the potential to map these into javascript so you could have window.resourceAliases["myimage.jpg"] yield a set of overrides that could be modified (added to and removed from)
>> 
>> Have you seen the (Last Call) draft of CSS Image Values and Replaced Content Module Level 3?
>> http://www.w3.org/TR/2012/WD-css3-images-20120112/
>> 
>> I believe it already has answers to your requests, especially combined with Media Queries.
>> 
>