如何在 IE 中制作背景大小的封面答案

【问题标题】：How to make background-size cover work in IE如何在 IE 中制作背景大小的封面
【发布时间】：2019-07-31 00:09:41
【问题描述】：

我尝试了各种方法，说它会使 background-size:cover;在 IE 中工作（需要涵盖 IE8+ 的版本），其中...。 - 添加了 IE=edge 和 chrome=1 的元数据 - 将所有三个“-mos-”添加到类中 - 另外，尝试将所有内容都放入一个行格式（但这不是我的结果，因为我正在为其他格式构建模板，背景链接需要内嵌。

我还错过了什么？？

.-bg-image-70 {
  min-height: 70vh;
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;

  -moz-background-size: cover;
  -o-background-size: cover;
  -ms-ie-background-size: cover;

}

  <div class="-bg-image-70" style="background-image: url(https://cdn.pixabay.com/photo/2015/04/19/08/33/flower-729512_960_720.jpg);" >

<div class="container"  ><h1>Hello!</h1></div>
        </div>

【问题讨论】：

标签： internet-explorer background-size

【解决方案1】：

从this article，我们可以看到“background-size:cover;”支持 IE 9+，因此您的代码无法在 IE 8 浏览器中运行。我建议您可以为容器 div 和背景图像设置宽度和高度属性。像这样：

<style>
    .-bg-image-70 {
        background: url("http://3.bp.blogspot.com/_EqZzf-l7OCg/TNmdtcyGBZI/AAAAAAAAAD8/KD5Y23c24go/s1600/homer-simpson-1280x1024.jpg") no-repeat;
        width: 900px;
        height: 450px;
        border: 1px solid;
        background-size: 1300px 700px;
    }
</style>
<div class="-bg-image-70">
    <div class="container"><h1>Hello!</h1></div>
</div>

此外，您还可以参考this thread 和this article 来解决此问题。

【讨论】：