css图像，文字填充100％的高度

Question

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

谢谢，Wienel

Answer 1

像this jsfiddle这样的东西是什么？我使用了display: table和display: table-row，尽管这不是一个真正的表格，但是表格显示非常适合这种事情。

Answer 2

你的父div有100％的宽度，这意味着100％的父母。如果您希望图像显示为100％的div，请给它一个类。

.imgClass {     宽度：100％ }

一般来说，你可能不想扭曲你的形象，如果你的文字是动态的，会发生什么。

Answer 3

  

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

你没有展示你的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;
}