我刚刚发布了一个jQuery插件，它可以满足您的需要，提供了很多选项：

https://github.com/GestiXi/image-scale

用法：

HTML

<div class="image-container">
    <img class="scale" data-scale="best-fit-down" data-align="center" src="img/example.jpg">
</div>

JavaScript

$(function() {
    $("img.scale").imageScale();
});

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

有两种方法可以使图像具有响应性。

当图像是背景图像时。#集装箱{宽度：300px；高度：300px；背景图像：url(https://images.fonearena.com/blog/wp-content/uploads/2013/11/Lenovo-p780-camera-sample-10.jpg);背景尺寸：封面；背景重复：无重复；背景位置：中心；}＜div id=“container”＞＜div＞在这里运行但是应该使用img标记来放置图像，因为它在SEO方面比背景图像更好，因为您可以在img标记的alt中写入关键字。因此，您可以使图像具有响应性。当图像在img标记中时。#集装箱{最大宽度：400px；溢出：隐藏；}国际货币基金组织{宽度：100%；对象拟合：包含；}<div id=“container”><img src=“https://images.fonearena.com/blog/wp-content/uploads/2013/11/Lenovo-p780-camera-sample-10.jpg“alt=”your_keyword“/>＜div＞在这里运行

下面是一个简单的解决方案（4步修复！！），似乎对我有用。该示例使用宽度来确定整体大小，但也可以翻转宽度以使用高度。

将CSS样式应用于图像容器（例如，<img>）将宽度属性设置为所需的尺寸对于尺寸，使用%表示相对大小或自动缩放（基于图像容器或显示）对静态维度或集合维度使用px（或其他）将高度属性设置为根据宽度自动调整享受！

例如

<img style="width:100%; height:auto;"
    src="https://googledrive.com/host/0BwDx0R31u6sYY1hPWnZrencxb1k/thanksgiving.png"
/>

我以这种方式在超链接内水平和垂直居中并按比例缩放图像：

#link {
    border: 1px solid blue;
    display: table-cell;
    height: 100px;
    vertical-align: middle;
    width: 100px;
}
#link img {
    border: 1px solid red;
    display: block;
    margin-left: auto;
    margin-right: auto;
    max-height: 60px;
    max-width: 60px;
}

它在Internet Explorer、Firefox和Safari中进行了测试。

有关居中的更多信息，请参阅此处。

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

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