Is there anyway to use responsive image styles (imagecache) on images

You can:

a) set a max-width: 100% on images, modern browsers will now scale down the images fluidly. See: http://unstoppablerobotninja.com/entry/fluid-images/ This would be most appropriate in the global.css as this uses fluid (for mobile browsers).

b) Define the width for each layout (wide, normal, narrow) in your CSS, using an image that is as wide as needed for the wide layout.

c) Define different images in Imagecache and define what image-version should be used. This is a variant on b) but it alows you to finetune the way the image is displayed. I cannot think of another way to switch the images as in the CSS making different blocks for each variant and use display:none / display:inherit to switch them off and on.

I would be cool if there was a condition "media-query result" in Context....

you can try http://drupal.org/project/responsive_images but i can't get it to work with nginx server. And i think if there is a context option it will be great.

I got a very nice responsive Views-based Slideshow using responsive_images (on apache) and a tiny js named blueberry http://marktyrrell.com/labs/blueberry
Works quite well after a little fix (blueberry didn't like it to have only on image, which can happen in our case). Fully recommendable.

@digitaldonkey: Nice find! How did you implement it? What did you fix?

In order to use the default views list-items and prevent braking the slider if you have only one image I changed the following.

chuck:wgh_d7_repo_develop_3 tho$ diff sites/all/themes/wgh_omega/js/jquery.blueberry.orig.js  sites/all/themes/wgh_omega/js/jquery.blueberry.js 

< 				var slides = $('.slides li', obj);
---
> 				var slides = $('.blueberry li');
90a91,98
> 				  
> 				  // mahe sure that there is one more image
>           if (slides.length < 2){
>             
>             return this;
>           }
> 
137c145,146
< 					sliderWidth = $('.slides', obj).width();
---
> 				  
> 					sliderWidth = $('.blueberry').width();
139,140c148
< 
< 					$('.slides', obj).css({height: cropHeight});
---
> 					$('.blueberry, .blueberry>ul, .blueberry>div', obj).css({height: cropHeight});
182a191,204
> 
> jQuery(window).load(function() {
> jQuery('.blueberry').blueberry();
> });

I just found this... In case someone wants to take a look. I haven't tried it yet but it looks promising
https://github.com/adamdbradley/foresight.js

Has anyone tried Adaptive Image?

Another one: Responsive images and styles
http://drupal.org/project/resp_img.

which works best?

@yingfan
http://drupal.org/project/resp_img has 3 videos how to use
seems to have more functionality than any other reponsive module out there. seems active maintained

digitaldonkey, please explain, what I'm doing wrong...

have a view as html item list.
load images using imagecache preset set to scale 100% x 100%
changed code in jquery.blueberry.js

But still it doesn't work.
I'm using drupal 6.

in D6 use ImageCache, Custom action (PHP code) + WURFL

$requestingDevice = wurfl_get_requestingDevice();
$newwidth = $requestingDevice->getCapability('resolution_width');
$newheight = $requestingDevice->getCapability('resolution_height');

$thumb_w_resize = $newwidth;
$thumb_h_resize = $newheight;

if ($width > $height) {
$thumb_h_ratio = $newheight / $height;
$thumb_w_resize = (int)round($width * $thumb_h_ratio);
} else {
$thumb_w_ratio = $newwidth / $width;
$thumb_h_resize = (int)round($height * $thumb_w_ratio);
}
if ($thumb_w_resize < $newwidth) {
$thumb_h_ratio = $newwidth / $thumb_w_resize;
$thumb_h_resize = (int)round($newheight * $thumb_h_ratio);
$thumb_w_resize = $newwidth;
}
$dst = imagecreatetruecolor($thumb_w_resize, $thumb_h_resize);
if (!imagecopyresampled($dst, $image->resource, 0,0,0,0, $thumb_w_resize, $thumb_h_resize, $width, $height)) return FALSE;

$image->resource = $dst;
return $image;