Question

如屏幕截图所示，div元素内的内容具有背景图像。此div容器设置为其父级height: 40%，我认为在这种情况下它是<ion-content>。现在，裁剪下面的图像和文本。我想让它们适合div容器。背景图片也不在div。

的中心

如何设置样式以便显示所有内容？
如何将背景图像垂直和水平居中？

如果我使浏览器视口更窄，它会以某种方式工作，如下所示。但是，无论视口的宽度如何，我都希望显示所有内容和背景图片垂直和水平居中。

HTML

<div style="height: 40%; overflow: hidden;">
    <div class="user-profile">
        <div class="user-profile-background"></div>
        <div class="user-profile-content">
            <div class="row" style="height: 100%;">
                <div class="col col-center">
                    <div class="row">
                        <div class="col col-33 col-offset-33">
                            <div style="height: 0; border-radius: 50%; background-image: url('img/ionic.png'); background-repeat: no-repeat; background-size: cover; background-position: center center; padding-top: 100%;">
                            </div>
                        </div>
                    </div>

                    <div class="row">
                        <div class="col" style="text-align: center; color: rgba(200, 200, 200, 1);">
                            <h3 style="color: white;">Seraph Cheng</h3>
                            <p><strong>Male, 28</strong></p>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

CSS

.user-profile {
    position: relative;
    width: 100%;
    height: 100%;
}

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

.user-profile .user-profile-content {
    position: relative;
    z-index: 2;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.5);
}

修改

添加了CodePen link来说明我的问题。

Answer 1

问题是background-size: cover css规则。您可以在此处测试封面和包含之间的区别： http://www.w3schools.com/cssref/playit.asp?filename=playcss_background-size&preval=contain

它与最新浏览器完全兼容：http://caniuse.com/background-img-opts

试试这个：

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

Answer 2

您可以为height设置明确的background image，例如height = 350px，并将center center设置为您指定背景图片的位置属性。这样高度将保持固定，但随着视口减小，背景图像将从左侧和右侧开始裁剪，即它将保持在中心。然后在较小的视图端口上，您可以将height缩减为250px。

Answer 3

HTML

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

CSS

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

问题解决了。

css - 适合div，center背景图像中的所有内容

HTML

CSS

修改

3 个答案:

HTML

CSS