html - 背景图像不会随着 Firefox 中的屏幕大小而缩小

Question

我有一个名为 .outer 的 div，其中包含一个名为 .film 的 div，而 div .film 有一些图像 div。

问题是 .outer div 在 Firefox 中没有缩小它作为屏幕尺寸，如下图所示:

如您所见，div 在 Chrome(左侧)中收缩得很好，但在 Firefox(右侧)中则不然。

有没有办法像 Chrome 一样在 Firefox 中缩小 .outer div？

这是代码:

* {
  margin: 0;
  padding: 0;
}
section, div {
  position: relative;
}
.outer {
  margin: 0 auto;
  width: 500px;
  height: 500px;
  display: flex;
  flex-flow: row;
  justify-content: center;
  overflow: hidden;
}
.film {
  width: 90%;
  margin: 0 .8%;
  display: flex;
  flex-flow: column;
  justify-content: center;
  flex-shrink: 0;
  padding-bottom: 33.3333%;
  background-image: url('https://i.imgur.com/3p6TLYE.jpg');
  background-size: cover;
  background-position: center center;
  overflow: hidden;
}
.film:nth-child(2n-1) {
  opacity: .4;
  transform: scale();
}

    <div class="outer">
      <div class="film"></div>
      <div class="film"></div>
      <div class="film"></div>
    </div>

Answer 1

首先想到的是，设置 display , width和 height html的属性(property)和 body标签。

您尝试过以下方法吗？

html, body {
  display: block;
  width: 100%;
  height: 100%;
}