Changing image sizes proportionally using CSS?

Question

I have been trying for a couple of days now to configure my thumbnail gallery so all the images appear the same height and width. However when I change the Css code to,

Answer 1

If you don't want to stretch the image, fit it into div container without overflow and center it by adjusting it's margin if needed.

1. The image will not get cropped
   
2. The aspect ratio will also remain the same.

HTML:

CSS:

div#container {
    height: 200px;
    width: 200px;
    border: 1px solid black;
    margin: 4px;
}
img {
    max-width: 100%;
    max-height: 100%;
    display: block;
    margin: 0 auto;
}