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

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

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

一个很好的解决方案是在父对象上不使用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;
}

我在这里找到了一个解决方案: http://www.sitepoint.com/maintain-image-aspect-ratios-responsive-web-design/

这个技巧是可行的，因为它存在元素的WIDTH和PADDING-BOTTOM之间的关系。所以:

家长:

container {
  height: 0;
  padding-bottom: 66%; /* for a 4:3 container size */
  }

子(删除所有与width相关的CSS，即width:100%):

img {
  max-height: 100%;
  max-width: 100%;
  position: absolute;     
  display:block;
  margin:0 auto; /* center */
  left:0;        /* center */
  right:0;       /* center */
  }

这里是一个解决最近打开的问题，标记为这个问题的副本。<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;
}