html - 尽管使用“背景尺寸：封面”，但 Div 背景图像不会缩小以适应

Question

这是原始图像（2880 x 900）：

以下是它在渲染页面 (1280 x 500) 上的显示方式：

1280 x 500 是<div>包含图像作为背景的尺寸。如果您注意到，渲染的背景会被裁剪而不是缩小以适合小于原始图像的 div。我的理解是 abackground-size: cover是为了在不裁剪的情况下放大或缩小图像。为什么它不起作用？

HTML

<div class="page-header-div">
    <div class="page-header-div-image-blog" style="background: url(<?php echo $bannerurl ?>) no-repeat;"></div>
    <div class="downarrow text-center downarrow1" onclick="scrollPage(this);"><i class="fa fa-chevron-down"></i></div>
</div>

CSS

.page-header-div { position: relative; }
.page-header-div-image-blog {
  background-size: cover;
  height: 100%;
}

另一个页面上完全相同的标记工作得很好！这两个页面具有用于片段的完全相同的标签。有没有办法通过 CSS 解决这个问题？如果是这样，如何使用 JS 来做这件事（如果可能的话，我真的很想避免这种情况）。

Answer 1

您必须改为使用background-size: contain;并设置background-repeat为no-repeat.

来自MDNbackground-size文档：

cover：与包含相反的关键字。尽可能大地缩放图像并保持图像纵横比（图像不会被压扁）。图像“覆盖”了容器的整个宽度或高度。当图像和容器具有不同的尺寸时，图像被裁剪为左/右或上/下。

contains：一个关键字，可以尽可能大地缩放图像并保持图像纵横比（图像不会被压扁）。图像在容器内加了信箱。当图像和容器具有不同的尺寸时，空白区域（左/右的顶部/底部）用背景色填充。除非被其他属性（例如背景位置）覆盖，否则图像会自动居中。

另请注意，正如@zgood 指出的那样：

2880 x 900 的纵横比与 1280 x 500 的 div 不同，因此使用包含的事件时会有间隙

div {
  width: 1280px;
  height: 500px;
  background-image: url(http://i.stack.imgur.com/rf8Wg.jpg);
  background-size: contain;
  background-repeat: no-repeat;
}

<div></div>

也可以看看：

• 缩放背景图像(MDN)

Answer 2

我遇到了同样的问题。事实证明，我的背景尺寸是在我的背景之前声明的。参见示例：

不工作：

-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
background: url(../img/background.jpg) center center no-repeat;

作品：

background: url(../img/background.jpg) center center no-repeat;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;

Answer 3

div {
  width: 1280px;
  height: 500px;
  background-image: url(http://i.stack.imgur.com/rf8Wg.jpg);
  background-size: 100% 100%;
  background-repeat: no-repeat;
}

<div></div>