将div缩放到背景图像

Question

我试图将图像作为背景图像和背景上的一些文本。问题是：div的高度必须与背景图像高度相同。

HTML

<div class="pict-cont">
    <div class="text">enter code here`
        <p style="color: #333">some text some text some text</p>
    </div>
</div>

CSS

.pict-cont {   
    background-image: url('https://upload.wikimedia.org/wikipedia/commons/thumb/b/ba/Dresdner_Elblforenz_bei_D%C3%A4mmerung%2C_2008.jpg/330px-Dresdner_Elblforenz_bei_D%C3%A4mmerung%2C_2008.jpg');
    background-color: #333;
    height: 1024px;
    background-size: 100% auto;
    background-repeat: no-repeat;
}

这是我的小提琴：https://jsfiddle.net/innpe/4b7bc2y6/1/

Answer 1

只需添加此课程：

.text {
  border: solid;
  height: 100%;
}

这样div的背景图像div高度相同。您可以根据需要调整图像格式。

如果您希望图像填充该div，请使用

background-size: cover;