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

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

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

目前，对于固定大小的图像（如JPEG或PNG文件），无法以确定性的方式正确执行此操作。

要按比例调整图像大小，必须将高度或宽度设置为“100%”，但不能同时设置两者。如果将两者都设置为“100%”，则图像将被拉伸。

选择高度还是宽度取决于图像和容器尺寸：

如果您的图像和容器都是“肖像形状”或“风景形状”（分别比它们宽或宽），那么高度和宽度中的哪一个都是“%100”并不重要。如果图像是纵向的，而容器是横向的，则必须在图像上设置height=“100%”。如果图像是横向的，而容器是纵向的，则必须在图像上设置width=“100%”。

如果您的图像是SVG，这是一种可变大小的矢量图像格式，则可以自动展开以适应容器。

您只需确保SVG文件中没有在<SVG>标记中设置这些财产：

height
width
viewbox

大多数矢量绘图程序在导出SVG文件时都会设置这些财产，因此每次导出时都必须手动编辑文件，或者编写脚本来进行编辑。

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

当图像是背景图像时。#集装箱{宽度：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＞在这里运行

查看我的解决方案：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;
}