背景圖像收縮但不是div

Question

我是新來的，完全被某物困住了。我有div背景圖片。當調整窗口大小時，一旦調整窗口小於實際照片的寬度，背景圖像的高度就會縮小。我喜歡這樣看起來的樣子，但div容器保持相同的高度。我擁有的任何文本都不會保持垂直居中於背景圖片（高度發生變化），而是保持居中居中（不是），所以文本從圖像上浮起。有沒有辦法讓容器以與背景圖像相同的方式縮小，這樣一切都保持居中？

#mainpic { 
 
    margin: 0; 
 
    width: 100%; 
 
    height: 400px; 
 
    background-image: url("http://www.aclefproductions.com/Images/pianoedit6.jpg"); 
 
    background-size: 100%; 
 
    background-repeat: no-repeat; 
 
    overflow: hidden; 
 
    display: flex; 
 
    align-items: center; 
 
    justify-content: center; 
 
}

<div id="mainpic"> 
 
    <h3>Hello</h3> 
 
</div>

Answer 1

也許這就是你想要什麼？見http://codepen.io/8odoros/pen/dXvzBq?editors=1100#

#mainpic { 
      margin: 0; 
      width: 100%; 
      background-image: url("http://www.aclefproductions.com/Images/pianoedit6.jpg"); 
      background-size: 100%; 
      background-repeat: no-repeat; 
      overflow: hidden; 
      display: flex; 
      align-items: center; 
      justify-content: center; 
} 
#mainpic h3{ 
      height:400px; 
} 

Answer 2

<div id = "mainpic"> 
    <h3>Hello</h3> 
    <img src="http://www.aclefproductions.com/Images/pianoedit6.jpg"> 
</div> 

#mainpic { 
    margin: 0; 
    position: relative; 
    } 

    #mainpic img{ 
    width: 100%; 
    } 


    #mainpic h3{ 
    position: absolute; 
    top: 50%; 
    left: 50%; 
    transform: translate(-50%, -50%); /*To account for the width and hight of the h3*/ 
    margin: 0; 
    } 

https://jsfiddle.net/4p3gek5x/

享受