Html Div背景图像不收缩以适应，尽管使用了；背景尺寸：封面“；

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

下面是它在呈现页面（1280 x 500）上的显示方式：

1280 x 500是包含图像作为背景的

的尺寸。如果您注意到，渲染的背景将被裁剪，而不是缩小以适合小于原始图像的div。我的理解是，

背景尺寸：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解决这个问题吗？如果是这样的话，如何使用JS（如果可能的话，我真的希望避免这种情况）。

您必须使用

背景大小：contain，并将
背景重复
设置为
不重复

发件人：

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

包含：一个关键字，它可以将图像缩放到尽可能大的范围，并保持图像的纵横比（图像不会被压扁）。图像在容器中以字母框显示。当图像和容器具有不同的尺寸时，空区域（左/右的顶部/底部）将填充背景色。除非被其他属性（如背景位置）覆盖，否则图像将自动居中

还请注意，正如@zgood所指出的：

2880 x 900的纵横比与1280 x 500的div不同，所以使用contain时会有间隙


div{
宽度：1280px；
高度：500px；
背景图片：url(http://i.stack.imgur.com/rf8Wg.jpg);
背景尺寸：包含；
背景重复：无重复；
}
您必须使用
背景大小：contain，并将
背景重复
设置为
不重复

发件人：

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

包含：一个关键字，它可以将图像缩放到尽可能大的范围，并保持图像的纵横比（图像不会被压扁）。图像在容器中以字母框显示。当图像和容器具有不同的尺寸时，空区域（左/右的顶部/底部）将填充背景色。除非被其他属性（如背景位置）覆盖，否则图像将自动居中

还请注意，正如@zgood所指出的：

2880 x 900的纵横比与1280 x 500的div不同，所以使用contain时会有间隙


div{
宽度：1280px；
高度：500px；
背景图片：url(http://i.stack.imgur.com/rf8Wg.jpg);
背景尺寸：包含；
背景重复：无重复；
}

div{
宽度：1280px；
高度：500px；
背景图片：url(http://i.stack.imgur.com/rf8Wg.jpg);
背景大小：100%100%；
背景重复：无重复；
}

div{
宽度：1280px；
高度：500px；
背景图片：url(http://i.stack.imgur.com/rf8Wg.jpg);
背景大小：100%100%；
背景重复：无重复；
}
我也遇到了同样的问题。事实证明，我的背景大小是在我的背景之前声明的。见示例：

不起作用：

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

我也有同样的问题。事实证明，我的背景大小是在我的背景之前声明的。见示例：

不起作用：

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

您需要
背景大小：containcontain
也会有一个gapy。没错，contain也不起作用。然而，同样的图像正好适合另一个具有相同div维度的页面，这让我感到困惑。在问这样的问题之前检查是否如此困难？你需要
背景尺寸：containcontain
也会有一个gapy。没错，contain也不起作用。然而，同样的图像正好适合另一个具有相同div维度的页面，这让我感到困惑。在提出这样的问题之前，检查是否如此困难？它已经设置为“不重复”，并且我在发布问题之前已经尝试过
包含
，但没有成功。我知道应该有一个间隙，但事实并非如此。在我的例子中，图像只是被裁剪，这不是我想要的。“包含”的结果也是一样的。@学习者因此可以发布一段代码片段来重现该问题。@学习者在另一页上使用完全相同的标记就可以了！一定有不同的东西。。。例如拼写错误的类名或无效的标记。你可能在1页上缺少一个CSS导入？不确定你想要什么…我已经发布了受影响文章的HTML和CSS。它已经设置为“不重复”，并且在发布问题之前我已经尝试了
包含
，但没有成功。我知道应该有一个间隙，但事实并非如此。在我的例子中，图像只是被裁剪，这不是我想要的。“结果也与contain相同。@学习者S