Most responsive designs use
Max-width to create flexible images. To make the images fluid, just add
max-width: 100% treatment ensures that your images never exceeds the width of its parent element. If the width of its container changes, the image resizes proportionally in nearly all modern browsers.
Filament Group introduced a practical technique that delivers optimized, contextual image sizes for responsive layouts that utilize dramatically different image sizes at different resolutions.
This technique uses .htaccess files and a JS file to serve up different sized images based on the screen width. This approach will allow developers to start with mobile-optimized images in their HTML and specify a larger size to be used for users with larger screen resolutions — without requesting both image sizes. You can view a demonstration of the technique here.
Matt Wilcox took a similar approach to the mobile image problem and created a solution called Adaptive Images. The Adaptive Images script works much like the Filament Group’s Responsive Images code, butAdaptive-Images doesn’t require you to do anything special or even create the different versions of the images yourself. Just drop in the Adaptive Images code and you’re done.