css - 文本填充 100% 高度的 css 图像

Question

如何解决这个问题：我有一个高度为 100% 的 div。在这个 div 中，我想放置一个图像并在其下放置几行文本（动态文本量）。如何确保图像被拉伸以完全填充文本留下的空间？

谢谢，维内尔

Answer 1

如何确保图像被拉伸以完全填充文本留下的空间？

你没有展示你的 html 结构，这使得它更难回答。

但是你必须创建一个带有图像和段落的 div。您需要将图像宽度设置为 100%

<div class="structure">
        <img class="imagefullsize" />
        <p class="textunderimage">Text here</p>
    </div>
</div>

的CSS：

.imagefullsize{
    height: 100%;
    width: 100%;
}

.textunderimage{
    display: block;
}

Answer 2

您正在寻找像这样的 jsfiddle吗？我用过display: table，display: table-row即使这不是一张真正的桌子，但桌子展示非常适合这种东西。

Answer 3

你的父 div 有 100% 的宽度，这意味着任何父级的 100%。如果您希望您的图像显示到 100% 的相关 div，请给它一个类。

.imgClass { 宽度：100% }

一般来说，您可能不想扭曲您的图像，如果您的文本是动态的，就会发生这种情况。