我在试着理解对我来说似乎出乎意料的行为:
我在一个容器中有一个max-height为100%的元素，该容器也使用了max-height，但出乎意料的是，子元素溢出了父元素:
.container {
背景:蓝色;
填充:10 px;
max-height: 200 px;
max-width: 200 px;
｝
img {
显示:块;
max-height: 100%;
max-width: 100%;
｝
< div class = "容器" >
<img src="http://placekitten.com/400/500" />
< / div >
但是，如果父节点被指定了显式的高度，这个值是固定的:
.container {
背景:蓝色;
填充:10 px;
max-height: 200 px;
max-width: 200 px;
身高:200 px;
｝
img {
显示:块;
max-height: 100%;
max-width: 100%;
｝
< div class = "容器" >
<img src="http://placekitten.com/400/500" />
< / div >
有人知道为什么在第一个例子中子节点不尊重父节点的max-height吗?为什么需要显式高度?
您可以使用属性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支持对象匹配，但不支持对象定位，但很快就会支持了。
我能想到的最接近这一点的例子是:
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如果这是你需要的宽度)
不确定这是否符合你的需要，但我能做到的最好了。
.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;
}
