Firefox屏幕尺寸不会缩小背景图像

Question

我有一个名为library(devtools) devtools::install_github("quanteda/quanteda.corpora") require(quanteda) require(quanteda.corpora) corp_news <- download('data_corpus_guardian') 的div，其中包含一个名为set @id := (select max(CusttomerId) from Customers) ; update Customers set CusttomerId = (@id :=@id +1 ) where CusttomerId is null ; 的div，而div .outer有一些图像div。

问题是.film div不会缩小，因为Firefox中的屏幕尺寸如下图所示：

如您所见，在Chrome（左侧）中，div收缩良好，而在Firefox（右侧）中，div收缩得很好。

有没有办法像Chrome一样缩小Firefox中的.film div？

这是代码：

.outer

.outer

Answer 1

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

您尝试过以下吗？

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

Answer 2

我可能找到的解决方案是将500px更改为在我测试过的firefox中可以使用的auto，而现在最大宽度已更改，可以通过max-width标签控制，只需用我的代码更改外部即可：

.outer {
  margin: 0 auto;
  width: auto;
  max-width: 500px;
  height: 500px;
  display: flex;
  flex-flow: row;
  justify-content: center;
  overflow: hidden;
}

Answer 3

我想我找到了解决方案，并为像我一样遇到同样问题的人们添加了答案。

在Firefox中，如果要缩小div作为屏幕尺寸，则不应使用px单位。使用padding-bottom代替图像的高度，如下所示：

.outer {
  margin: 0 auto;
  width: 80%; // basic size of the holder(outer). Use percentage unit to control it.
  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: 70.3333%; // Set the height of the images.
  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>