backgroundsize属性仅为ie>=9，但如果这对您来说很好，您可以使用带有背景图像的div并设置backgroundsize：contain：

div.image{
    background-image: url("your/url/here");
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
}

现在，您只需将div大小设置为所需的大小，图像不仅保持其纵横比，还将在div中垂直和水平集中。不要忘记在css上设置大小，因为div本身没有width/height属性。

这种方法与setecs答案不同，使用这种方法，图像区域将是恒定的，并由您定义（根据div大小和图像纵横比，水平或垂直地留出空格），而setecs回答将为您提供一个与缩放图像大小完全相同的框（没有空格）。

编辑：根据MDN背景大小文档，您可以使用专有过滤器声明模拟IE8中的背景大小属性：

虽然Internet Explorer 8不支持背景大小属性，但可以使用非标准的-ms过滤器函数模拟其某些功能：

-ms-filter: "progid:DXImageTransform.Microsoft.AlphaImageLoader(src='path_relative_to_the_HTML_file', sizingMethod='scale')";

下面的解决方案将允许图像的放大和缩小，具体取决于父框的宽度。

所有图像都有一个固定宽度的父容器，仅用于演示。在生产中，这将是父框的宽度。

最佳实践（2018）：

此解决方案告诉浏览器以最大可用宽度渲染图像，并以该宽度的百分比调整高度。

.父级{宽度：100px；}国际货币基金组织{显示：块；宽度：100%；高度：自动；}<p>此图像最初为400x400像素，但应通过CSS调整大小：</p><div class=“parent”><img width=“400”height=“400”src=“https://placehold.it/400x400"></div>

更新颖的解决方案：

使用更高级的解决方案，无论图像大小如何，您都可以裁剪图像，并添加背景色来补偿裁剪。

.父级{宽度：100px；}.容器{显示：块；宽度：100%；高度：自动；位置：相对；溢出：隐藏；填充：34.37%0 0；/*34.37%=100/（w/w）=100/*/}.容器img{显示：块；最大宽度：100%；最大高度：100%；位置：绝对；顶部：0；底部：0；左：0；右：0；}<p>此图像最初为640x220，但应通过CSS调整大小：</p><div class=“parent”><div class=“container”><img width=“640”height=“220”src=“https://placehold.it/640x220"></div></div>

对于指定填充的行，需要计算图像的纵横比，例如：

640px (w) = 100%
220px (h) = ?

640/220 = 2.909
100/2.909 = 34.37%

因此，顶部填充=34.37%。

Firefox 71+（2019-12-03）和Chrome 79+（2019-2-10）支持将IMG元素的宽度和高度HTML属性内部映射到新的纵横比CSS属性（该属性本身还不能直接使用）。

计算出的纵横比用于在加载图像之前为图像预留空间，只要计算出的宽高比等于图像的实际纵横比，就可以在加载图像后防止页面“跳转”。

要使其工作，必须通过CSS将两个图像维度之一覆盖为自动值：

IMG {max-width: 100%; height: auto; }

<img src="example.png" width="1280" height="720" alt="Example" />

在该示例中，即使图像尚未加载，并且作为最大宽度：100%的结果，有效图像宽度小于1280，也保持16:9（1280:720）的纵横比。

另请参阅相关的Firefox错误392261。

只需将此添加到css中，它将自动收缩和扩展，并保持原始比例。

img {
    display: block;
    max-width: 100%;
    max-height: 100%;
    width: auto;
    height: auto;
}

如果图像对于指定区域太大，这将使图像收缩（作为缺点，它不会放大图像）。

setec的解决方案适用于自动模式下的“收缩到适合”。但是，为了最佳地扩展以适应“自动”模式，您需要首先将接收到的图像放入临时id，检查它是否可以在高度或宽度上扩展（取决于其纵横比v/s，即显示块的纵横比），

$(".temp_image").attr("src","str.jpg" ).load(function() { 
    // callback to get actual size of received image 

    // define to expand image in Height 
    if(($(".temp_image").height() / $(".temp_image").width()) > display_aspect_ratio ) {
        $(".image").css('height', max_height_of_box);
        $(".image").css('width',' auto');
    } else { 
        // define to expand image in Width
        $(".image").css('width' ,max_width_of_box);
        $(".image").css('height','auto');
    }
    //Finally put the image to Completely Fill the display area while maintaining aspect ratio.
    $(".image").attr("src","str.jpg");
});

当接收到的图像小于显示框时，这种方法很有用。您必须将它们保存在服务器上的原始小尺寸，而不是其扩展版本，以填充更大的显示框，以节省大小和带宽。

我建议对于响应式方法，最佳做法是使用视口单位和最小/最大属性，如下所示：

img{
  display: block;
  width: 12vw;
  height:12vw;
  max-width:100%;
  min-width:100px;
  min-height:100px;
  object-fit:contain;
}