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

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

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

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

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

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>

解决方法很简单，只需要一点数学。。。

只需将图像放在div中，然后放在指定图像的HTML文件中。使用图像的像素值以百分比形式设置宽度和高度值，以计算宽度与高度的精确比率。

例如，假设您的图像宽度为200像素，高度为160像素。您可以放心地说，宽度值将为100%，因为它是较大的值。要计算高度值，只需将高度除以宽度即可得到80%的百分比值。在代码中，它看起来像这样。。。

<div class="image_holder_div">
    <img src="some_pic.png" width="100%" height="80%">
</div>

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

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

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

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

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

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

height
width
viewbox

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

以下内容非常适合我：

img{
   height: 99999px;
   object-fit:contain;
   max-height: 100%;
   max-width: 100%;    
   display: block;
   margin: auto auto;
}

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

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

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