这里有一个解决方案，即使提供的图像太小或太大，无法容纳div，它也可以在div中垂直和水平对齐img，而不进行任何拉伸。

HTML内容：

<div id="myDiv">
  <img alt="Client Logo" title="Client Logo" src="Imagelocation" />
</div>

CSS内容：

#myDiv
{
  height: 104px;
  width: 140px;
}
#myDiv img
{
  max-width: 100%;
  max-height: 100%;
  margin: auto;
  display: block;
}

jQuery部分：

var logoHeight = $('#myDiv img').height();
    if (logoHeight < 104) {
        var margintop = (104 - logoHeight) / 2;
        $('#myDiv img').css('margin-top', margintop);
    }

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

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

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/

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

您可以将图像设置为div的背景，然后使用CSS background size属性：

background-size: cover;

它将“将背景图像缩放到尽可能大，以使背景区域完全被背景图像覆盖。背景图像的某些部分可能在背景定位区域内看不见”--W3Schools

这是我的解决方案。您需要将图片插入两次。但它不使用js，img将调整为宽度和高度。您可以单击“运行代码片段-完整页面”，打开开发控制台并调整窗口宽度以查看响应效果。/*响应宽度*/.响应宽度{背景：lightsalmon；高度：100px；宽度：50%；}/*Widthlimit公司*/.最大宽度{背景：海军；高度：200px；宽度：100px；}.div1{最大高度：100%；位置：相对；框大小：内容框；/*中心：*/顶部：50%；变换：translateY（-50%）；}.边缘{高度：自动；最大宽度：100%；不透明度：0；}.div2{高度：100%；宽度：配合内容；位置：绝对；顶部：0；/*中心：*/左：50%；变换：translateX（-50%）；}.mainimg{最大高度：100%；最大宽度：100%；}<div class=“responsivewidth”><div class=“div1”><img class=“margerimag”src=“https://via.placeholder.com/2000x1500" /><div class=“div2”><img class=“mainimg”src=“https://via.placeholder.com/2000x1500" /></div></div></div><div class=“maxedbywidth”><div class=“div1”><img class=“margerimag”src=“https://via.placeholder.com/2000x1500" /><div class=“div2”><img class=“mainimg”src=“https://via.placeholder.com/2000x1500" /></div></div></div>

查看我的解决方案：http://codepen.io/petethepig/pen/dvFsA

它是用纯CSS编写的，没有任何JavaScript代码。它可以处理任何大小和方向的图像。

给定这样的HTML：

<div class="image">
  <div class="trick"></div>
  <img src="http://placekitten.com/415/200"/>
</div>

CSS代码将是：

.image {
  font-size: 0;
  text-align: center;
  width: 200px;  /* Container's dimensions */
  height: 150px;
}
img {
  display: inline-block;
  vertical-align: middle;
  max-height: 100%;
  max-width: 100%;
}
.trick {
  display: inline-block;
  vertical-align: middle;
  height: 150px;
}

所有提供的答案，包括已接受的答案，都只能在假设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的值必须相同。