title: How to set max width of an image in CSS
body: <p>On my website I would like to display images uploaded by user in a new window with a specific size (<code>width: 600px</code>). The problem is that the images may be big. So if they are bigger than these <code>600px</code>, I would like to resize them, preserving the aspect ratio.</p>
  
  <p>I tried the <code>max-width</code> CSS property, but it doesn't work: the image's size doesn't change. </p>
  
  <p>Is there any way to solve this problem?</p>
  
  <p><strong>HTML</strong>:</p>
  
  <pre class="lang-html prettyprint-override"><code>&lt;div id="ImageContainerr"&gt;
      &lt;img src="DisplayImage.do?ad_id=${requestScope.advert.id}" class="Image" /&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p><strong>CSS</strong>:</p>
  
  <pre class="lang-css prettyprint-override"><code>img.Image { max-width: 100%;}
  div#ImageContainer { width: 600px; }
  </code></pre>
  
  <p>I also tried setting the <code>max-width: 600px</code> for an image, but doesn't work. The image is streamed from a servlet (it's stored outside Tomcat's webapps folder).</p>