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

破碎:小提琴

工作:小提琴

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

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

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如果这是你需要的宽度)

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

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

破碎:小提琴

工作:小提琴

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

.container { background: blue; padding: 10px; max-height: 200px; max-width: 200px; float: left; margin-right: 20px; } .img1 { display: block; max-height: 100%; max-width: 100%; } .img2 { display: block; max-height: inherit; max-width: inherit; } <!-- example 1 --> <div class="container"> <img class='img1' src="http://via.placeholder.com/350x450" /> </div> <!-- example 2 --> <div class="container"> <img class='img2' src="http://via.placeholder.com/350x450" /> </div>

我玩了一下。在firefox中使用较大的图像时，我使用继承属性值得到了很好的结果。这对你有帮助吗?

.container {
    background: blue;
    padding: 10px;
    max-height: 100px;
    max-width: 100px;
    text-align:center;
}

img {
    max-height: inherit;
    max-width: inherit;
}

一个很好的解决方案是在父对象上不使用height，只在带有View Port的子对象上使用它:

例如:https://jsfiddle.net/voan3v13/1/

body, html {
  width: 100%;
  height: 100%;
}
.parent {
  width: 400px;
  background: green;
}

.child {
  max-height: 40vh;
  background: blue;
  overflow-y: scroll;
}

您可以使用属性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支持对象匹配，但不支持对象定位，但很快就会支持了。