Cómo establecer el ancho máximo de una imagen en CSS

En mi sitio web me gustaría mostrar las imágenes cargadas por el usuario en una nueva ventana con un tamaño específico ( width: 600px). El problema es que las imágenes pueden ser grandes. Entonces, si son más grandes que estos 600px, me gustaría cambiar su tamaño, conservando la relación de aspecto.

Probé la max-widthpropiedad CSS, pero no funciona: el tamaño de la imagen no cambia.

¿Hay alguna forma de solucionar este problema?

HTML :

<div id="ImageContainerr">
    <img src="DisplayImage.do?ad_id=${requestScope.advert.id}" class="Image" />
</div>

CSS :

img.Image { max-width: 100%;}
div#ImageContainer { width: 600px; }

También intenté configurar el max-width: 600pxpara una imagen, pero no funciona. La imagen se transmite desde un servlet (se almacena fuera de la carpeta webapps de Tomcat).

Puedes escribir así:

img{
    width:100%;
    max-width:600px;
}

Compruebe esto http://jsfiddle.net/ErNeT/

Veo que esto no ha sido respondido como definitivo.

Veo que tiene un ancho máximo como 100% y un ancho como 600. Voltee esos.

Una forma sencilla también es:

     <img src="image.png" style="max-width:600px;width:100%">

Yo uso esto a menudo, y luego puedes controlar imágenes individuales también, y no tenerlo en todas las etiquetas img. También podría CSS como a continuación.

 .image600{
     width:100%;
     max-width:600px;
 }

     <img src="image.png" class="image600">

El problema es que la etiqueta img es un elemento en línea y no puede restringir el ancho del elemento en línea.

Entonces, para restringir el ancho de la etiqueta img, primero debe convertirlo en un elemento de bloque en línea

img.Image{
    display: inline-block;
}

Dado el ancho de su contenedor 600px.

Si desea que solo quepan imágenes más grandes que esas, agregue: CSS:

#ImageContainer img {
    max-width: 600px;
}

Si desea que TODAS las imágenes ocupen el espacio disponible (600 px):

#ImageContainer img {
    width: 600px;
}

Prueba esto

 div#ImageContainer { width: 600px; }
 #ImageContainer img{ max-width: 600px}

Tu CSS es casi correcto. Solo falta display: block;en la imagen css. También un error tipográfico en su identificación. Debería ser<div id="ImageContainer">

img.Image { max-width: 100%; display: block; }
div#ImageContainer { width: 600px; }

<div id="ImageContainer">
    <img src="http://placehold.it/1000x600" class="Image">
</div>