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