这里有一个解决方案：

img {
   width: 100%;
   height: auto;
   object-fit: cover;
}

这将确保图像始终覆盖整个父对象（向下和向上缩放）并保持相同的纵横比。

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

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

国际货币基金组织{显示：块；最大宽度：230px；最大高度：95px；宽度：自动；高度：自动；}<p>此图像最初为400x400像素，但应通过CSS调整大小：</p><img width=“400”height=“400”src=“http://i.stack.imgur.com/aEEkn.png">

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

您可以将容器设置为显示：伸缩和对齐项目：居中（其他对齐项目值也适用）。您也可以在图像本身上设置对齐自身，而不是对齐项目。

https://jsfiddle.net/sot2qgj6/3/

如果你想用固定的宽度百分比，而不是固定的宽度像素来放置图像，这就是答案。

这在处理不同大小的屏幕时很有用。

诀窍是

使用padding top设置高度与宽度之间的距离。使用position:absolute将图像放入填充空间。使用最大高度和最大宽度确保图像不会覆盖父元素。使用display:block和margin:auto将图像居中。

我也评论了小提琴中的大部分技巧。

我还找到了其他方法来实现这一点。在html中不会有真实的图像，所以当我需要html中的“img”元素时，我个人更倾向于首选答案。

使用背景的简单csshttp://jsfiddle.net/4660s79h/2/

顶部有单词的背景图像http://jsfiddle.net/4660s79h/1/

使用位置绝对值的概念如下http://www.w3schools.com/howto/howto_css_aspect_ratio.asp

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

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");
});

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