Auto image resize for iPhone/iPad gallery in portrait & landscape mode

I have to optimize a small website for iPhone and iPad. Thanks to media queries, I'm using two css files, one for iPhone portrait & landscape mode, and a second for iPad portrait & landscape + all others. There is a picture gallery on the 开发者_开发问答website and I wanted the images to use the maximum available area depending on which device they are beeing displayed on, plus the orientation mode.

I ended up using 4 nivo sliders on the same page, where I hide 3 of 4 using css (display:none). The images are resized by TimThumb. This is definitely a bad solution (e.g. all 4 nivo sliders are beeing loaded and run on the iPhone even only one is displayed) and I was wondering if there is any other solution to this problem?

---

I had a similar problem for ipad app and i simply used this:

img.homepg { width:920px; } @media screen and (max-width:910px) {

img.homepg { 
    width:670px;  } } img { 
transition:all .2s linear; 
-o-transition:all .2s linear; 
-moz-transition:all .2s linear; 
-webkit-transition:all .2s linear; }

with .homepg being the img class, 920 being the largest image width, 910 being the max screen width that triggers the image resize (aka when the orientation is changed), and 670 being the min img width!