如果可以的话，使用背景图像并设置background-size: cover。这将使背景覆盖整个元素。

CSS

div {
  background-image: url(path/to/your/image.png);
  background-repeat: no-repeat;
  background-position: 50% 50%;
  background-size: cover;
}

如果你坚持使用内联图像，有几个选项。首先，有

object-fit

此属性作用于图像、视频和其他类似于background-size: cover的对象。

CSS

img {
  object-fit: cover;
}

遗憾的是，浏览器的支持并不是很好，直到IE版本11都不支持它。下一个选项使用jQuery

CSS + jQuery

HTML

<div>
  <img src="image.png" class="cover-image">
</div>

CSS

div {
  height: 8em;
  width: 15em;
}

自定义jQuery插件

(function ($) {
  $.fn.coverImage = function(contain) {
    this.each(function() {
      var $this = $(this),
        src = $this.get(0).src,
        $wrapper = $this.parent();

      if (contain) {
        $wrapper.css({
          'background': 'url(' + src + ') 50% 50%/contain no-repeat'
        });
      } else {
        $wrapper.css({
          'background': 'url(' + src + ') 50% 50%/cover no-repeat'
        });
      }

      $this.remove();
    });

    return this;
  };
})(jQuery);

像这样使用插件

jQuery('.cover-image').coverImage();

它将获取一张图像，将其设置为图像包装器元素的背景图像，并从文档中删除img标记。最后你可以用

纯CSS

你可以用这个作为后备。图像会放大以覆盖它的容器，但不会缩小。

CSS

div {
  height: 8em;
  width: 15em;
  overflow: hidden;
}

div img {
  min-height: 100%;
  min-width: 100%;
  width: auto;
  height: auto;
  max-width: none;
  max-height: none;
  display: block;
  position: relative;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

希望这对大家有所帮助，编码愉快!

我也有类似的问题。我只用CSS解决了这个问题。

基本上，Object-fit: cover可以帮助你实现在div中定位图像时保持纵横比的任务。

但问题是物体匹配:封面在IE中无法工作，它采用100%的宽度和100%的高度，纵横比扭曲。换句话说，我在chrome浏览器中看到的图像缩放效果没有了。

我采用的方法是在容器中使用absolute定位图像，然后使用组合将其放在正中央:

position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);

一旦它在中心，我给图像，

// For vertical blocks (i.e., where height is greater than width)
height: 100%;
width: auto;

// For Horizontal blocks (i.e., where width is greater than height)
height: auto;
width: 100%;

这使得图像得到对象适合:覆盖的效果。

下面是上述逻辑的演示。

https://jsfiddle.net/furqan_694/s3xLe1gp/

这种逻辑适用于所有浏览器。

如果你想设置一个最大宽度或高度(这样它就不会很大)，同时保持图像的纵横比，你可以这样做:

img{
   object-fit: contain;
   max-height: 70px;
}

有一个更简单的方法，只使用CSS和HTML:

HTML:

<div 
    class="fill" 
    style="background-image: url('path/to/image.jpg');">
</div>

CSS:

.fill {
    background-size: cover;
    background-position: center;
    width: 100%;
    height: 100%;
}

这将把你的图像作为背景，并拉伸它以适应div的大小而不失真。

感谢CSS3

img
{
   object-fit: contain;
}

https://developer.mozilla.org/en-US/docs/Web/CSS/object-fit

IE和EDGE始终是局外人: http://caniuse.com/#feat=object-fit

HTML:

<style>
#foo, #bar{
    width: 50px; /* use any width or height */
    height: 50px;
    background-position: center center;
    background-repeat: no-repeat;
    background-size: cover;
}
</style>

<div id="foo" style="background-image: url('path/to/image1.png');">
<div id="bar" style="background-image: url('path/to/image2.png');">

JSFiddle

.．.如果你想设置或改变图像(以#foo为例):

jQuery:

$("#foo").css("background-image", "url('path/to/image.png')");

JavaScript:

document.getElementById("foo").style.backgroundImage = "url('path/to/image.png')";