2016年更新:

现代浏览器的表现要好得多。你所需要做的就是将图像宽度设置为100%(演示)

.container img {
   width: 100%;
}

由于您不知道纵横比，因此必须使用一些脚本。下面是我如何用jQuery(演示)做到这一点:

CSS

.container {
    width: 40%;
    height: 40%;
    background: #444;
    margin: 0 auto;
}
.container img.wide {
    max-width: 100%;
    max-height: 100%;
    height: auto;
}
.container img.tall {
    max-height: 100%;
    max-width: 100%;
    width: auto;
}​

HTML

<div class="container">
 <img src="http://i48.tinypic.com/wrltuc.jpg" />
</div>
<br />
<br />
<div class="container">
 <img src="http://i47.tinypic.com/i1bek8.jpg" />
</div>

脚本

$(window).load(function(){
 $('.container').find('img').each(function(){
  var imgClass = (this.width/this.height > 1) ? 'wide' : 'tall';
  $(this).addClass(imgClass);
 })
})

这不是一个完美的解决方案，但这个CSS可能会有所帮助。缩放是这段代码的工作原理，理论上，对于小图像，因子应该是无限大的，但在大多数情况下，2、4或8就可以了。

#myImage {
    zoom: 2;  //increase if you have very small images

    display: block;
    margin: auto;

    height: auto;
    max-height: 100%;

    width: auto;
    max-width: 100%;
}

如果你想设置一个最大宽度或高度(这样它就不会很大)，同时保持图像的纵横比，你可以这样做:

img{
   object-fit: contain;
   max-height: 70px;
}

HTML:

<style>
#foo, #bar{
    width: 50px; /* use any width or height */
    height: 50px;
    background-position: center center;
    background-repeat: no-repeat;
    background-size: cover;
}
</style>

<div id="foo" style="background-image: url('path/to/image1.png');">
<div id="bar" style="background-image: url('path/to/image2.png');">

JSFiddle

.．.如果你想设置或改变图像(以#foo为例):

jQuery:

$("#foo").css("background-image", "url('path/to/image.png')");

JavaScript:

document.getElementById("foo").style.backgroundImage = "url('path/to/image.png')";

你可以用object-fit: cover;在父div上。

https://css-tricks.com/almanac/properties/o/object-fit/

设置外部容器div的宽度和高度。然后在img上使用下面的样式:

.container img{
    width:100%;
    height:auto;
    max-height:100%;
}

这将帮助你保持你的img的纵横比