Explico la propuesta:
Aquí todos estamos de acuerdo, esto es lo que hace que la imagen sea elástica y se escale junto con su contenedor.
Esta regla hace que la imagen sea elástica sólo hasta este ancho, es decir, que escale sólo hasta 350px. La he probado en IE7, 8 y 9 y funciona, con la salvedad de que hay algunos píxeles de diferencia entre el 7 y el 8 cuando el contenedor fuerza a la imagen hasta su mínimo. Aquí habría que darle alguna vueltecilla de tuerca más.
Y, por supuesto, el añadido de
memoadian:
En mis pruebas no ha sido necesaria esta regla, pero seguro que por compatibilidad es mucho más seguro usarla y así se evitan deformaciones.
Este código funcionaría, si no me equivoco, para cualquier imagen que esté dentro de #content, sean cual sean sus dimensiones (por encima de 350px de ancho, claro), sin necesidad de usar clases distintas para cada imagen ni JS.
Otra historia es el IE6, que ni siquiera he mirado, pero que creo que podríamos dar ya por muerto, ¿no?