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

#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中进行了测试。

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

正如我在2014年Codepen示例中所看到的，我已经制定了一个解决方案，可以在尽可能少的javascript的帮助下处理任何未知的宽度/高度（纵横比）组合，以在容器的纵横比高于/低于图像的纵横比时更改图像居中的CSS：

尝试通过拖动右下角来调整容器大小：

//检测当前图像的窗口宽度是否过窄//并且适合于100%的高度而不是100%的宽度。const photo=文档.images[0]const onPhotoResize=新建ResizeObserver（条目=>window.requestAnimationFrame（checkRatio）)onPhotoResize观察（photo.parentNode）函数checkRatio（）{const photoParent=photo.parentNode，imageAspectRatio=照片客户端宽度/照片客户端高度，parentAspectRatio=photoParent.clientWidth/photoPrent.clientHeightphoto.classList[imageAspectRatio>parentAspectRatio？'add'：'remove']（'max'）}.box格式{宽度：20%；高度：60%；边距：自动；位置：绝对；顶部：0；左：0；右：0；底部：0；调整大小：两者；溢出：隐藏；边框：5px纯红色；} .box>img{位置：绝对；顶部：50%；左：50%；宽度：100%；转换：转换（-50%，-50%）；}.box>img.max｛width:auto；height:100%；｝<div class='box'><img src=“https://upload.wikimedia.org/wikipedia/commons/6/6a/Mona_Lisa.jpg"></div>

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

编辑：以前基于表格的图像定位在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) };
});

检查我的答案，使图像响应-最简单的方法-

img{
    width: 100%;
    max-width: 800px;
}

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