将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;