Am 25.01.2012 15:07 schrieb Matthew Wilcox:
In fact, please just read the blog post Bruce Lawson (Opera Software) made summarising the last few months of effort on this, and his proposal for a mark-up level solution (which I'm in broad support of, though there are a lot of knotty issues with any potential solution - as can be seen by the volume of blog-posts, comments, and articles on the topic):http://www.brucelawson.co.uk/2011/notes-on-adaptive-images-yet-again/
I would like to propose a use case different from the ones in this blog-post: Scaled images.
The more physical screen densities improve, the less image pixels actually correspond to device pixels, and thus scaling images will be less a problem. E.g., designers might want to define an image size in em units rather than in px, so it keeps its relation to the text size.
This use case requires a negotiation based on the dimensions of the image element rather than the dimensions of the media. It would be nice if a solution to the responsive images problem would address this use case, too. AFAICS this would require a more general syntax for the conditions.
On 25 January 2012 13:42, David Goss<dvdg...@gmail.com> wrote:I'm proposing this (adapted from Bruce Lawson's<picture> idea, and similar to how the<video> element works): <adaptiveimg> <img src="sweater-small.jpg" alt="Blue v-neck sweater in soft wool"> <source src="sweater-medium.jpg" media="(min-width: 300px) and (max-width: 450px)"> <source src="sweater-large.jpg" media="(min-width: 451px) and (max-width: 600px)"> <source src="sweater-huge.jpg" media="(min-width: 601px)"> </adaptiveimg>
If the introduction of a new element is an option, it could also be the other way around, as image maps work:
<img src="default.gif" srclist="mySrcList" id="myImg" alt="My responsive image" style="width:5em;height:auto">
<srclist id="mySrcList"> <source src="low.gif" cond="[condition]"> <source src="high.gif" cond="[condition]"> </srclist>To address my above use case, I replaced the media attribute with a more general cond attibute, which can take a condition with a selector and a rule. The selector can be the keyword "media" or a CSS selector, and the rule either a min-width and/or max-width declaration, or some statement about network speed or whatever, such as:
<source src="small.gif" cond="#myImg{max-width:49px}">
<source src="medium.gif" cond="#myImg{min-width:50px;max-width:99px}">
or:
<source src="small.gif" cond="#wrapper{max-width:320px}">
or:
<source src="small.gif" cond="media{max-width:320px}">
or:
<source src="slow.gif" cond="media{network-speed:[some slow value]}">
