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

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

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

当图像太小时，Thorn007的公认答案不起作用。

为了解决这个问题，我添加了一个比例因子。这样，它会使图像变大，并填充div容器。

例子：

<div style="width:400px; height:200px;">
  <img src="pix.jpg" style="max-width:100px; height:50px; transform:scale(4); transform-origin:left top;" />
</div>

笔记：

对于WebKit，必须添加-WebKit transform:scale（4）-webkit转换原点：左上；在风格上。比例因子为4时，最大宽度=400/4=100，最大高度=200/4=50另一种解决方案是将最大宽度和最大高度设置为25%。这更简单。

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

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>

事实证明，还有另一种方法可以做到这一点：对象拟合。

<img style='height: 100%; width: 100%; object-fit: contain'/>

将完成工作。当然，不要忘记包含其他必要的属性，如src和alt。

小提琴：http://jsfiddle.net/mbHB4/7364/

将图像所需的高度和宽度提供给包含＜img＞标记的div。不要忘记在正确的样式标记中给出高度/宽度。

在＜img＞标记中，将最大高度和最大宽度设置为100%。

<div style="height:750px; width:700px;">
    <img alt="That Image" style="max-height:100%; max-width:100%;" src="">
</div>

正确后，可以在适当的类中添加详细信息。

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

img {
    max-height: 75vh;
}