我在试着理解对我来说似乎出乎意料的行为:
我在一个容器中有一个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://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 */
}
与其使用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>
.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;
}
