.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;
}

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

.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%。这允许它被限制到父元素的高度(同时仍然保持它的纵横比)。

.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;
}