How to change the src or multiple images when the window size gets small

I was 开发者_JAVA百科wondering how to change the source of multiple images when the user changes the size of the browser window or they are using an IPAD?

You can do this with pure CSS, using CSS media queries. Instead of using <img> elements for your images, if you use background images on some block elements, you can easily swap their dimensions and background images by adding/removing classes (based on media queries -- and hence available client area) to their common container.

Well if the user resizes the browser, the images are already loaded so there is no need to load a smaller version.

If they are using a smaller device eg ipad or iphone you can detect that and redirect to a different page where the images are the correct size for that device, eg ipad.example.com, m.example.com, etc.

You do this with css3 media queries. Check out this article on smashing magazine