html - 背景图像缩小但不是div

Question

我是新手，完全被某件事难住了。我有一个带有背景图片的 div。调整窗口大小时，一旦窗口调整得小于实际照片的宽度，背景图像的高度就会缩小。我喜欢它的外观，但 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

<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/

享受