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