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

让它变得简单！

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

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

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

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

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>

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

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

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

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

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

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

height
width
viewbox

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

您可以将图像设置为div的背景，然后使用CSS background size属性：

background-size: cover;

它将“将背景图像缩放到尽可能大，以使背景区域完全被背景图像覆盖。背景图像的某些部分可能在背景定位区域内看不见”--W3Schools

如果您使用Bootstrap，只需将img响应类添加到img标记：

<img class="img-responsive" src="img_chania.jpg" alt="Chania">

引导映像