How to set an image's width and height without stretching it?

Question

If I have:

#logo {
    width: 400px;
    height: 200px;
}

then

Answer 1

CSS3 object-fit

Am not sure how far its been implemented by webkit, IE and firefox. But Opera works like magic

object-fit works with SVG content, but the same effect can also be achieved by setting the preserveAspectRatio="" attribute in the SVG itself.

img {
  height: 100px;
  width: 100px;
  -o-object-fit: contain;
}

Chris Mills demo's it here http://dev.opera.com/articles/view/css3-object-fit-object-position/