我有以下的HTML代码:
<div class="main-container">
<h1>A title</h1>
<p>Some text</p>
<div class="sub-container">
<img src="">
</div>
</div>
With the following CSS :
.main-container{
width: 100%;
height: 100%;
display: flex;
flex-direction: column;
}
.sub-container{
flex-grow:2;
background-color: green;
}
请注意,我不知道“main-container”上方容器的大小。我使用flex是因为我希望“main-container”中的div占据底部所有剩余空间。
我想要的是在“sub-container”中放置一张图片,使其在高度和宽度上适应其父容器的大小。现在,如果我将图像添加到“sub-container”中,它会溢出并且不会缩放。我知道flex仅适用于直接子元素(即“sub-container”而不是其中的图像)。我也尝试在“sub-container”上使用flex,但我无法实现任何令人满意的结果。
object-fit: contain
。 - kukkuzaspect-ratio
,否则 OP 无法将其完全适配到容器 - OP 需要考虑 object-fit :) - kukkuz