css

【问题标题】：css - fit all content inside a div, center background imagecss - 将所有内容放入 div 中，居中背景图片
【发布时间】：2016-03-07 00:29:23
【问题描述】：

如屏幕截图所示，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>

.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 来说明我的问题。

【问题讨论】：

标签： javascript html css ionic-framework

【解决方案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;
}

【讨论】：

【解决方案2】：

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

【讨论】：

【解决方案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;
}

问题解决了。

【讨论】：