Javascript css-将所有内容放在一个div的中心背景图像中

如屏幕截图所示，在具有背景图像的

div

元素中有内容。这个

div

容器被设置为具有其父容器的

高度：40%

，我相信在这种情况下是

。现在，下面的图像和文本被裁剪。我想让它们适合

div

容器。背景图像也不在

div

中居中

如何设置样式以显示所有内容

如何使背景图像垂直和水平居中

如果我使浏览器视口变得更窄（如下所示），它会以某种方式工作。但是，我希望显示所有内容和垂直和水平居中的背景图像，而不考虑视口的宽度

---

HTML

---

编辑

---

添加了一个来说明我的问题。

问题在于

背景大小：封面
css规则。您可以在此处测试盖子和容器之间的差异：

它与最新浏览器完全兼容：

试试这个：

.user-profile .user-profile-background {
    position: absolute;
    z-index: 1;
    width: 100%;
    height: 100%;
    background-image: url('../img/basketball.jpg');
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
}

问题在于
背景大小：封面
css规则。您可以在此处测试盖子和容器之间的差异：

它与最新浏览器完全兼容：

试试这个：

.user-profile .user-profile-background {
    position: absolute;
    z-index: 1;
    width: 100%;
    height: 100%;
    background-image: url('../img/basketball.jpg');
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
}

您可以为
背景图像
设置显式的
高度
，例如
高度=350px
，并将
居中
设置为指定背景图像的位置属性。这样，高度将保持不变，但随着视口的缩小，背景图像将从左侧和右侧开始剪切，即它将保持在中心。
然后，在较小的视图端口上，您可以将
高度减小为
250px
您可以为
背景图像设置显式的
高度
，例如
高度=350px
，并将
中心
设置为指定背景图像的位置属性。这样，高度将保持不变，但随着视口的缩小，背景图像将从左侧和右侧开始剪切，即它将保持在中心。
然后，在较小的视图端口上，您可以将
高度降低为
250px
HTML
问题解决了

HTML
问题解决了


.user-profile .user-profile-background {
    position: absolute;
    z-index: 1;
    width: 100%;
    height: 100%;
    background-image: url('../img/basketball.jpg');
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
}

<div class="root">
  <div class="subroot">
    <div class="container">
      <div class="square bg"></div>
    </div>
    <div class="passage">
      <p>Hello world!</p>
    </div>
  </div>
</div>

.root {
  width: 70%;
  margin: auto;
  border: 2px solid yellow;
  background-image: url('http://baconmockup.com/600/400');
  background-size: cover;
  background-position: center;
}

.subroot {
  background-color: rgba(0, 0, 0, 0.7);
}

.container {
  border: 2px solid black;
  width: 100px;
  margin: auto;
}

.square {
  border: 2px dotted red;
  padding-bottom: 100%;
}

.bg {
  background-image: url('http://placehold.it/200x300');
  background-size: cover;
  background-repeat: no-repeat;
  background-position: center;
  border-radius: 50%;
}

.passage {
  border: 2px dotted green;
  width: 80%;
  margin: auto;
  text-align: center;
  white-space: nowrap;
  overflow: scroll;
  color: white;
}