How do I scale a lot of images using CSS in HTML5 and CSS3

Question

I have a CSS image gallery that displays a larger photo with descriptive text below it, when a thumbnail image is hovered on.
Each photo has code like that following:
<a class="thumbnail" >
<img src="thumbs1/paradethumbs/DSC_0073.jpg" alt="thumbnail picture" />
<span><img src="pics1/paradepics/DSC_0073.jpg" alt=" " /><br /> 19 - a black faced sheep.</span>
</a>
The first source is a thumbnail,  image stored at a size of 72 by 48.
The second source is an image stored at 600 x 400.
When the thunbnail is hovered on, the larger photo is displayed at its full size using css.
There are 20 or so thumbnails in this gallery, and different numbers in other galleries that use the same code.
The example above is number 19 from 20.
This works fine on tablets and larger displays.
When I wish to show it on an Iphone or similar, with a display that is 480 or less wide, I need to scale the larger photo down to 300 wide.
As the Iphone will have a lower quality of image than a larger display, it will not matter too much if the 600x400 photo is scaled down, and having tried it by giving it an ID with CSS like
#imagescale{ width:300px; } it looks acceptable. However, as IDs are supposed to be unique, then thats a no go area for the remaining photos.
My problem is how do I select the second image source shown in bold above, and scale it and the span text by 50%.
The text is not too important as it can be changed to fit - the image is the main problem.
I need someting like "if the display is less than 600 and the image is in the pics directory, display it at 300 wide".
The browser will hopefully  take care of the height.
Any suggestiosn would be appreciated.
Howard Walker

Answer 1

Thanks Nancy. The general idea and the link to the article helped a lot.
However, the css using using a percentage had unpredictable results when selecting repeated images.
The first one scales to 50% and then the next scales to 50% of the last one (25%)  and so on ad infinitum, unless you click on another object that is not an image.
Using a pixel size like 280px rather than a percentage did the trick, but it also involved changing lots of other items before I could get everything to fit.
Now I have a better knowledge of media queries and how to set them up.
Best of all, all my image galleries work fine just using css and html. Never thought that would happen.
Take five stars!
And the same to David Powers for his great article.
Howard Walker