这里有一个解决方案，即使提供的图像太小或太大，无法容纳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);
    }

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

<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;
}

一个简单的解决方案是使用Flexbox。将容器的CSS定义为：

.container{
    display: flex;
    justify-content: center;
    align-items: center;
    align-content: center;
    overflow: hidden;
    /* Any custom height */
}

将包含的图像宽度调整为100%，您将在容器中获得一个保持尺寸的居中图像。

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

HTML格式：

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

CSS:

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

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

我使用以下代码修复了此问题：

<div class="container"><img src="image_url" /></div>

.container {
    height: 75px;
    width: 75px;
}

.container img {
    object-fit: cover;
    object-position: top;
    display: block;
    height: 100%;
    width: 100%;
}

不要将显式宽度或高度应用于图像标记。相反，给它：

max-width:100%;
max-height:100%;

此外，高度：自动；如果只想指定宽度。

例子：http://jsfiddle.net/xwrvxser/1/

国际货币基金组织{最大宽度：100%；最大高度：100%；}.肖像{高度：80px；宽度：30px；}.景观{高度：30px；宽度：80px；}.方形{高度：75px；宽度：75px；}纵向分区<div class=“纵向”><img src=“http://i.stack.imgur.com/xkF9Q.jpg"></div>景观部<div class=“landscape”><img src=“http://i.stack.imgur.com/xkF9Q.jpg"></div>方形分区<div class=“square”><img src=“http://i.stack.imgur.com/xkF9Q.jpg"></div>