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

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

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

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

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

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

height
width
viewbox

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

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

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

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

正如这里所回答的，你也可以使用vh单位而不是最大高度：如果它在你的浏览器（如Chrome）上不起作用，100%：

img {
    max-height: 75vh;
}

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

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

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

我刚刚发布了一个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();
});

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