Question

我是新人，完全被某些东西困住了。我有背景图像的div。调整窗口大小后，一旦调整窗口小于实际照片的宽度，背景图像的高度就会缩小。我喜欢它看起来的方式，但div容器保持相同的高度。我所拥有的任何文字都没有垂直居中于背景图片（正在改变高度），它仍然以div（不是）为中心，因此文本浮动图像。有没有办法让容器缩小，就像背景图像一样，所有东西都保持居中？

＆＃13;

#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;
}

＆＃13;

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

＆＃13;

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/

享受

Answer 2

也许这就是你想要的？见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;
}

背景图像缩小但不是div

2 个答案: