我能想到的最接近这一点的例子是:

http://jsfiddle.net/YRFJQ/1/

or

.container {  
  background: blue; 
  border: 10px solid blue; 
  max-height: 200px; 
  max-width: 200px; 
  overflow:hidden;
  box-sizing:border-box;
}

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

主要问题是高度占容器高度的百分比，所以它在父容器中寻找显式设置的高度，而不是max-height。

在某种程度上，我能看到的唯一方法是上面的方法，你可以隐藏溢出，但填充物仍然作为图像流入的可见空间，所以用实边代替(然后添加边界框，使它200px如果这是你需要的宽度)

不确定这是否符合你的需要，但我能做到的最好了。

您可以使用属性object-fit

.cover {
    object-fit: cover;
    width: 150px;
    height: 100px;
}

就像这里建议的那样

Chris Mills在Dev.Opera中对这个属性的完整解释

还有一个更好的CSS-Tricks

它在

Chrome 31 +。 Safari 7 + 1。 Firefox 36 +。 歌剧26 +。 Android 4 . + 4。 iOS 8 +。

我刚刚检查了vivaldi和铬支持它以及(在这里没有惊喜)

目前IE上不支持，但是…谁在乎呢?此外，iOS支持对象匹配，但不支持对象定位，但很快就会支持了。

容器通常已经很好地包装了它们的内容。反之往往就不一样了:孩子们不能很好地满足他们的祖先。因此，在最里面的元素上设置宽度/高度值，而不是在最外面的元素上，并让外面的元素包装它们的内容。

.container {
    background: blue;
    padding: 10px;
}

img {
    display: block;
    max-height: 200px;
    max-width: 200px;
}

我能想到的最接近这一点的例子是:

http://jsfiddle.net/YRFJQ/1/

or

.container {  
  background: blue; 
  border: 10px solid blue; 
  max-height: 200px; 
  max-width: 200px; 
  overflow:hidden;
  box-sizing:border-box;
}

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

主要问题是高度占容器高度的百分比，所以它在父容器中寻找显式设置的高度，而不是max-height。

在某种程度上，我能看到的唯一方法是上面的方法，你可以隐藏溢出，但填充物仍然作为图像流入的可见空间，所以用实边代替(然后添加边界框，使它200px如果这是你需要的宽度)

不确定这是否符合你的需要，但我能做到的最好了。

当你为子结点的max-height指定一个百分比时，它是父结点实际高度的百分比，而不是父结点max-height的百分比，这很奇怪。这同样适用于max-width。

当你没有在父节点上指定显式高度时，子节点的max-height就没有基础高度可供计算，因此max-height计算为none，允许子节点尽可能高。现在作用于子对象的唯一其他约束是父对象的max-width，由于图像本身的高度大于宽度，因此它向下溢出容器的高度，以保持其纵横比，同时仍然尽可能大。

当你为父节点指定显式高度时，子节点知道它最多只能是那个显式高度的100%。这允许它被限制到父元素的高度(同时仍然保持它的纵横比)。

这里是一个解决最近打开的问题，标记为这个问题的副本。<img>标签超过了父标签<div>的max-height。

破碎:小提琴

工作:小提琴

在这种情况下，向2个parent <div>标记添加display:flex就是答案