Hintergrundbild schrumpft aber nicht div

Question

Ich bin neu und bin völlig durch etwas ratlos. Ich habe div mit einem Hintergrundbild. Wenn das Fenster in der Größe geändert wird, verkleinert sich das Hintergrundbild in der Höhe, sobald das Fenster kleiner als die Breite des tatsächlichen Fotos eingestellt wird. Ich mag die Art, wie das aussieht, aber der Div-Container bleibt auf der gleichen Höhe. Jeder Text, den ich habe, bleibt nicht vertikal zentriert zum Hintergrundbild (das die Höhe ändert), sondern bleibt zentriert zum div (was nicht der Fall ist), so dass der Text vom Bild schwebt. Gibt es eine Möglichkeit, den Container auf die gleiche Weise wie das Hintergrundbild schrumpfen zu lassen, sodass alles zentriert bleibt?

#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

Vielleicht ist es das, was Sie wollen? Siehe 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/

Genießen