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

Question

我有以下的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，但我无法实现任何令人满意的结果。

- GuitarExtended

---

我相信这会对你有所帮助 - CSS 图片大小调整。 - kukkuz

@kukkuz 这里的问题是“他不知道宽度和高度，因为他正在使用 flex-grow” - c#m - hdotluna

@HermLuna，容器的尺寸是否动态变化并不重要——重要的是如何将图像适应其中以及如何处理溢出...也许OP需要考虑使用object-fit: contain。 - kukkuz

@kukkuz 我认为他想让图像完全适应容器。我不知道CSS能否做到。但我不确定。 - hdotluna

@HermLuna 是的，除非他打破 aspect-ratio，否则 OP 无法将其完全适配到容器 - OP 需要考虑 object-fit :) - kukkuz

@kukkuz 很好。我也应该学习这个 :D 谢谢你的信息。 - hdotluna

Answer 1

这个布局是你想要的吗？

使用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>

- huan feng

---

如果你将主容器的高度限制在500像素，图片将会突出并且不会垂直缩小。 - undefined

Answer 2

你可以使用这个类：

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

不要忘记在你的标签中添加.img-fluid。

- Mattonit

---

我需要的是能够双向缩放的东西。你的解决方案可以解决宽度的问题，但如果图像高度大于宽度，它将会溢出。 - GuitarExtended