所有提供的答案，包括已接受的答案，都只能在假设div包装器大小固定的情况下工作。因此，无论div包装器的大小如何，这都是如何实现的，如果您开发响应页面，这非常有用：

在DIV选择器中编写以下声明：

width: 8.33% /* Or whatever percentage you want your div to take */
max-height: anyValueYouWant /* (In px or %) */

然后将这些声明放入IMG选择器中：

width: "100%" /* Obligatory */
max-height: anyValueYouWant /* (In px or %) */

非常重要：

对于DIV和IMG选择器，maxHeight的值必须相同。

此解决方案不会拉伸图像并填充整个容器，但会剪切部分图像。

HTML格式：

 <div><img src="/images/image.png"></div>

CSS:

div {
    width: 100%;
    height: 10em;
    overflow: hidden;

img {
    min-width: 100%;
    min-height: 100%;
}

我看到很多人都建议对象匹配，这是一个不错的选择。但是，如果您希望它也能在较旧的浏览器中工作，还有另一种方法可以轻松实现。

这很简单。我采用的方法是将图像放置在容器内，然后使用组合将其放置在中心：

position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);

一旦它在中心，我给图像，

// For vertical blocks (i.e., where height is greater than width)
height: 100%;
width: auto;

// For horizontal blocks (i.e., where width is greater than height)
height: auto;
width: 100%;

这使图像获得对象拟合的效果：覆盖。

以下是上述逻辑的演示。

https://jsfiddle.net/furqan_694/s3xLe1gp/

此逻辑适用于所有浏览器。

编辑：以前基于表格的图像定位在Internet Explorer 11中存在问题（最大高度在显示中不起作用：表格元素）。我将其替换为基于内联的定位，这不仅在InternetExplorer7和InternetExplorer11中都很好，而且还需要更少的代码。

这是我对这个问题的看法。只有当容器具有指定的大小（最大宽度和最大高度似乎不适合没有具体大小的容器）时，它才会起作用，但我以允许重用的方式编写了CSS内容（在现有容器中添加相框类和px125大小类）。

在CSS中：

.picture-frame
{
    vertical-align: top;
    display: inline-block;
    text-align: center;
}

.picture-frame.px125
{
    width: 125px;
    height: 125px;
    line-height: 125px;
}

.picture-frame img
{
    margin-top: -4px; /* Inline images have a slight offset for some reason when positioned using vertical-align */
    max-width: 100%;
    max-height: 100%;
    display: inline-block;
    vertical-align: middle;
    border: 0; /* Remove border on images enclosed in anchors in Internet Explorer */
}

在HTML中：

<a href="#" class="picture-frame px125">
    <img src="http://i.imgur.com/lesa2wS.png"/>
</a>

演示

/*主样式*/.相框{垂直对齐：顶部；显示：内联块；文本对齐：居中；}.picture-frame.px32{宽度：32px；高度：32px；线条高度：32px；}.picture-frame.px125{宽度：125px；高度：125px；线条高度：125px；}.相框img{页边空白：-4px；/*使用垂直对齐定位时，由于某些原因，内联图像有轻微偏移*/最大宽度：100%；最大高度：100%；显示：内联块；垂直对齐：中间；边框：0；/*在Internet Explorer中删除锚定中包含的图像的边框*/}/*额外费用*/.相框{填充：5px；}框架{边框：1px实心黑色；}<p>32像素</p><a href=“#”class=“picture frame px32 frame”><img src=“http://i.imgur.com/lesa2wS.png"/></a><a href=“#”class=“picture frame px32 frame”><img src=“http://i.imgur.com/kFMJxdZ.png"/></a><a href=“#”class=“picture frame px32 frame”><img src=“http://i.imgur.com/BDabZj0.png"/></a><p>125像素</p><a href=“#”class=“picture frame px125 frame”><img src=“http://i.imgur.com/lesa2wS.png"/></a><a href=“#”class=“picture frame px125 frame”><img src=“http://i.imgur.com/kFMJxdZ.png"/></a><a href=“#”class=“picture frame px125 frame”><img src=“http://i.imgur.com/BDabZj0.png"/></a>

编辑：使用JavaScript可能进一步改进（放大图像）：

function fixImage(img)
{
    var $this = $(img);
    var parent = $this.closest('.picture-frame');
    if ($this.width() == parent.width() || $this.height() == parent.height())
        return;

    if ($this.width() > $this.height())
        $this.css('width', parent.width() + 'px');
    else
        $this.css('height', parent.height() + 'px');
}

$('.picture-frame img:visible').each(function
{
    if (this.complete)
        fixImage(this);
    else
        this.onload = function(){ fixImage(this) };
});

解决方法很简单，只需要一点数学。。。

只需将图像放在div中，然后放在指定图像的HTML文件中。使用图像的像素值以百分比形式设置宽度和高度值，以计算宽度与高度的精确比率。

例如，假设您的图像宽度为200像素，高度为160像素。您可以放心地说，宽度值将为100%，因为它是较大的值。要计算高度值，只需将高度除以宽度即可得到80%的百分比值。在代码中，它看起来像这样。。。

<div class="image_holder_div">
    <img src="some_pic.png" width="100%" height="80%">
</div>

最简单的方法是使用对象拟合：

<div class="container">
  <img src="path/to/image.jpg">
</div>

.container{
   height: 300px;
}

.container img{
  height: 100%;
  width: 100%;
  object-fit: cover;
}

如果您使用Bootstrap，只需添加img响应类并更改为

.container img{
    object-fit: cover;
}