背景大小：封面在任何浏览器中都不起作用答案

【问题标题】：Background-size: cover not working in any browser背景大小：封面在任何浏览器中都不起作用
【发布时间】：2016-07-31 08:56:07
【问题描述】：

我有以下 HTML 代码：

 <header id="header">
      <h1><span id="titlu-pagina">Watercolors</span></h1>

          <ul>
              <li><a href="#">About Me</a></li>
              <li><a href="#">Where To Find Me</a></li>
              <li><a href="#">The Blog</a></li>
         </ul>
</header>

以及相应的 CSS 之一：

  #header {
          height: 800px;
          text-align: center;
          border-bottom: 1px solid black;
          background-color: #734C8F;
          background-image: url('10.jpg');
         -webkit-background-size: cover;
         -moz-background-size: cover;
         -o-background-size: cover;
          background-size: cover !important;
    }

我正在尝试将图像设置为标题的背景，但由于某种原因，图像未以完整尺寸显示。我已经尝试过低分辨率图像，但仍然有一些部分被剪掉了。如果我调整浏览器的大小，图像会缩放并最终达到完整大小。

如果我将代码更改为

 background-image: url('10.jpg') no-repeat center center fixed;

图像根本不显示。我究竟做错了什么？我已经在所有浏览器中尝试过代码，但结果都是一样的。

【问题讨论】：

“如果我将代码更改为 background-image: url('10.jpg') no-repeat center center fixed，图像根本不会显示” – 当然不会，因为这不是background-image 属性 - 这是 short-hand 版本，background ...
哦，谢谢。现在我明白了。它确实解决了这个特定问题，但扩展的事情仍在发生。
我无法理解您的问题描述；你能举一个活生生的例子吗？
jsfiddle.net/Cilvako/1hwncnmL 如果您尝试调整浏览器窗口的大小，图像会缩放但不会保持原始大小并且会被裁剪。也许我很好地解释了这个问题，但无论我使用什么设备，我都希望我的背景图片看起来一样。
看起来这只是您对background-size: cover实际所做的事情的误解。 developer.mozilla.org/en-US/docs/Web/CSS/background-size: “[cover] 尽可能大地缩放图像并保持图像纵横比（图像不会被压扁）。图像“覆盖”了容器的整个宽度或高度。当图像和容器具有不同的尺寸时，_图像被剪裁左/右或上/下。”_

标签： css browser background-image cover

【解决方案1】：

看起来这只是/只是您对 background-size:cover 实际作用的误解。

https://developer.mozilla.org/en-US/docs/Web/CSS/background-size:

[cover] 尽可能大地缩放图像并保持图像纵横比（图像不会被压扁）。图像“覆盖”了容器的整个宽度或高度。当图像和容器的尺寸不同时，图像被裁剪左/右或上/下。

(“当图像和容器具有不同的尺寸” 应该是“具有不同的纵横比”——因为如果它们没有不同的尺寸，但图像和元素的宽度和高度将完全一样一样，那么我们一开始就不需要应用背景大小。）

如果您想要图像被“压扁”而不是被剪裁——然后使用background-size: 100% 100%。

请问一般建议什么时候使用 100% 100% background-size 以及什么时候使用 :cover 比较好？我不太清楚他们在覆盖容器方面是如何做两件不同的事情的。

background-size: 100% 100% 表示，将图像在两个维度上拉伸到各自容器尺寸的 100%。如果图像和元素的纵横比不匹配，图像将被扭曲/挤压。

cover 然而，旨在将图像缩放到尽可能大，同时保持它的纵横比。

把它想象成在电视屏幕上看电影。电影纵横比和电视纵横比通常不同（或至少习惯于旧电视。）现在通常您希望看到图片中发生的所有内容，并且不会错过“侧面”发生的任何事情它的。因此，电影以覆盖整个屏幕宽度（或高度）的方式缩放，并且您会在顶部和底部（或左/右）看到黑条 - 从而保持电影的纵横比 -因为你不想看扭曲的电影，当汽车轮胎是椭圆形并且人们的脸不自然地宽或长时，这看起来很奇怪。

这个类比让事情更清楚......？

【讨论】：

是的。所以如果我想确保我不会得到扭曲的图像，我最好使用:cover。如果我确定宽高比，我最好使用 :100% 100% 并且不会得到剪裁的图像。所以我想这是一个在特定情况下更适合我的问题——尽管我会选择 :100% 100%。非常感谢您花时间解释:)！

【解决方案2】：

要在不裁剪的情况下调整背景图像的大小，它必须与父级或标题成比例。如果您的标题具有 16:9 的比例，那么您的图像也必须如此。他们需要一起调整大小。但这似乎比它需要的更棘手。

替代方法是使用以下结构；

<header>
    <img />
    <nav></nav>
</header>

图片位于标题内。导航（位于图像顶部）相对于标题绝对定位。

这可能需要一些进一步的媒体查询来管理较小屏幕的字体大小和导航列表项。

JS Fiddle

【讨论】：

【解决方案3】：

#header {
      
      text-align: center;
      border-bottom: 1px solid black;
      background-color: #734C8F;
      background-image: url('10.jpg');
     -webkit-background-size: cover;
     -moz-background-size: cover;
     -o-background-size: cover;
      background-size: cover !important;
      width:100%  
      min-height: 100vh;

}

我已经在你的标题部分添加了两行代码，你可以解决你的问题

【讨论】：

【解决方案4】：

兄弟，而不是使用背景图像： url ('x') no-repeat center center fixed；在你上面的备用我建议你这是格式.. background:url ('x') no-repeat center center fixed;因为 css 中的背景简写属性是我在消息中建议的。谢谢你，再见 frnds

【讨论】：