Question

我在div中设置背景图片的最大高度时遇到一些问题。最大高度应为图像的高度，且不大于该高度。如果div中包含大量内容，则只需放大图片即可。当背景图像结束时，我希望它继续使用我的其余内容的背景颜色。这是我尝试过的代码

<style>
    .profilbg {
        background: url(<?php echo $uin->backgroundimg; ?>);
        background-repeat: no-repeat;
        background-size:cover;
    }
    .profilen {
        width: 100%;
        text-align: left;
        clear: both;
    }
</style>
<div class="profilen">
    <div class="profilbg">
        <?php echo nl2br($uin->profilen); ?>
    </div>
</div>

使用此代码，背景图片只是放大并且如果有更多内容则会变大。

Answer 1

您可以将此CSS规则用于背景图片：

.profilbg {
  background: url(<?php echo $uin->backgroundimg; ?>) no-repeat #000 // Your bg color;
  background-size: 100%;
}

这将使您的背景图像仅为100％宽度，不包括高度，在图像之后将自动显示背景颜色。

Answer 2

.profilbg {
background: url(<?php echo $uin->backgroundimg; ?>) no-repeat #000 ;
background-size:100%;

}

或

.profilbg {
    background: url(<?php echo $uin->backgroundimg; ?>) no-repeat #000 ;
    max-height:100%;

    }

试试看......

Answer 3

将CSS规则更改为此选项，它将使图像为全宽，与其纵横比一样高，在顶部对齐并用红色填充剩余空间

.profilbg {
    background: #f00 url(<?php echo $uin->backgroundimg; ?>);
    background-repeat: no-repeat;
    background-size: 100% auto;
    background-position: center top;
}

使用背景速记

.profilbg {
    background: #f00
                url(<?php echo $uin->backgroundimg; ?>)
                no-repeat
                center top / 100% auto;
}

样品

div {
  background: #f00
              url(http://www.placehold.it/1000x150)
              no-repeat
              center top / 100% auto;

  /* temp for test */
  height: 300px;
}

<div></div>

Answer 4

我知道这个问题已经解决，但很容易做到background-size: 100%; 当您使用封面时，它将覆盖整页，但如果您使用100％，它将覆盖页面背景whitout geting zoomed inn

Div背景图像最大尺寸

4 个答案: