尽管使用＆＃34;背景尺寸：封面＆＃34; Div背景图像不会缩小以适应

Question

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

以及它在渲染页面上的显示方式（1280 x 500）：

1280 x 500是包含图像作为背景的background-size: cover的维度。如果您注意到，渲染的背景将被裁剪而不是缩小以适合小于原始图像的div内部。我的理解是<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> 意味着在没有裁剪的情况下向上或向下缩放图像。为什么不起作用？

HTML

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

CSS

{{1}}

另一页上完全相同的标记效果很好！这两个页面具有与片段完全相同的标签。有没有办法通过CSS解决这个问题？如果是这样，怎么可以用JS做这件事（如果可能的话，我真的想避免这样做。）

Answer 1

您必须使用background-size: contain;，并将background-repeat设置为no-repeat。

来自MDN background-size docs：

  

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

     

包含：一种关键字，可以尽可能地缩放图像并保持图像宽高比（图像不会被压扁）。图像在容器内是letterboxed。当图像和容器具有不同的尺寸时，空白区域（左/右上/下）用背景颜色填充。除非被其他属性（如background-position）覆盖，否则图像会自动居中。

还要注意，正如@zgood指出的那样：

  

2880 x 900是与你的div在1280 x 500处不同的宽高比，所以当你使用包含你的情况时会有差距

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

<div></div>

另见：

• Scaling background images（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

＆＃13;

＆＃13;

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

＆＃13;

<div></div>

＆＃13;

＆＃13;

＆＃13;