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

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＞标记的div。不要忘记在正确的样式标记中给出高度/宽度。

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

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

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

让它变得简单！

给容器一个固定的高度，然后为容器内的img标记设置宽度和最大高度。

<div style="height: 250px">
     <img src="..." alt=" " style="width: 100%;max-height: 100%" />
</div>

不同的是，您将宽度设置为100%，而不是最大宽度。

有几种方法可以使图像适合＜div＞。

img {
    object-fit: cover;
}

CSS对象适合属性用于指定如何调整＜img＞或＜video＞的大小以适合其容器。

此属性告诉内容以多种方式填充容器；例如“保持该纵横比”或“拉伸并尽可能多地占用空间”。

fill-这是默认值。调整图像大小以填充给定尺寸。如有必要，图像将被拉伸或压扁以适合contain-图像保持其纵横比，但调整大小以适应给定的尺寸封面-图像保持其纵横比并填充给定的尺寸。将剪裁图像以适合none-图像未调整大小缩小-图像缩小到无或包含的最小版本

你可以在这里找到更多的工作样本。

以下内容非常适合我：

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

您必须告诉浏览器您放置它的高度：

.example {
    height: 220px; /* DEFINE HEIGHT */
    background: url('../img/example.png');
    background-size: 100% 100%;
    background-repeat: no-repeat;
}