Question

我有以下html：

<div class="main-container">
    <h1>A title</h1>
    <p>Some text</p>
    <div class="sub-container">
        <img src="">
    </div>
</div>

使用以下CSS：

.main-container{
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
}
.sub-container{
    flex-grow:2;
    background-color: green;
}

请注意，我不知道“主容器”上方容器的大小。我正在使用flex，因为我希望“main-container”中的div占用底部的所有剩余空间。

我想要的是在“子容器”中有一个图像，它在两个方向（高度和宽度）上都符合其父级的大小。现在，如果我将图像添加到“子容器”中，它会溢出并且根本不会缩放。我知道flex只适用于直接孩子（即“子容器”，但不适用于里面的图像）。我也尝试在“子容器”上使用flex，但是我无法达到任何令人满意的效果。

Answer 1

您可以使用此课程：

.img-fluid {
    max-height:100%;
    height:auto;
}

不要忘记将.img-fluid添加到img

Answer 2

您想要这种布局吗？

使用flex: 1 1 0控制子容器并使用width: 100%可以使图像适合容器。

.main-container{
  border: 3px solid green;
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
}
.sub-container{
    flex-grow: 1 1 0;
    background-color: green;
    display: flex;
}

.sub-container img {
   width: 100%;
   height: 100%;
}

<div class="main-container">
    <h1>A title</h1>
    <p>Some text</p>
    <div class="sub-container">
        <img src="https://picsum.photos/1080/600">
    </div>
</div>

在弹性项目中自动调整图像大小

2 个答案: