我在试着理解对我来说似乎出乎意料的行为:
我在一个容器中有一个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吗?为什么需要显式高度?
我能想到的最接近这一点的例子是:
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;
}
我在这里找到了一个解决方案:
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 */
}
您可以使用属性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支持对象匹配，但不支持对象定位，但很快就会支持了。
与其使用max-height: 100%/100%，另一种填满所有空间的方法是使用position: absolute，将上/下/左/右设置为0。
换句话说，HTML看起来像下面这样:
<div class="flex-content">
<div class="scrollable-content-wrapper">
<div class="scrollable-content">
1, 2, 3
</div>
</div>
</div>
.flex-content {
flex-grow: 1;
position: relative;
width: 100%;
height: 100%;
}
.scrollable-content-wrapper {
position: absolute;
left: 0;
right: 0;
top: 0;
bottom: 0;
overflow: auto;
}
.scrollable-content {
/* Add styling here */
}
试试下面的方法:
.flex-content {
flex-grow: 1;
position: relative;
width: 100%;
height: 100%;
}
.scrollable-content-wrapper {
position: absolute;
left: 0;
right: 0;
top: 0;
bottom: 0;
overflow: auto;
}
html {
height: 50%;
width: 50%;
}
body {
height: 100%;
width: 100%;
}
.parent {
height: 100%;
outline: 1px solid red;
}
<html>
<body>
<div class="parent">
<div class="flex-content">
<div class="scrollable-content-wrapper">
<div class="scrollable-content" id="scrollable">
1, 2, 3
</div>
</div>
</div>
</div>
<button onClick="scrollable.innerText += '\nSome more text'" style="margin-top: 1rem;">Add Line</button>
<p>
The red outline represents the parent. Click above to add a line until overflow occurs to see that the size of the parent is not increased.
</p>
</body>
</html>
