background image doesn't shrink as screen size in firefox

Question

I have a div called .outer which contained a div called .film, and the div .film has some of image divs.

The problem is .outer div doesn't shrink it as the screen size in Firefox like this picture:

As you can see, the div is shrinking well in Chrome(left side) but not in Firefox(right side).

Are there any ways to shrink the .outer div in Firefox just like Chrome does?

This is the code:

* {
  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>

I don't see any difference in behavior in firefox, I did "reload frame" after setting 247x381 and got the same behavior in firefox too... — kukkuz, Apr 20 '19 at 12:41

score 0 · Answer 1 · answered Apr 20 '19 at 09:05

0

First thing which comes to mind is, setting display, width and height property of html and body tag.

Have you tried the following?

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

answered Apr 20 '19 at 09:05

Fabian

100
11

score 0 · Answer 2 · answered Apr 20 '19 at 09:15

Possible solution I can find is that changing your 500px to auto that works in firefox I have tested while now the maximum width is changed which can be controlled by max-width tag just change your outer with my code :

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

score 0 · Answer 3 · answered Apr 20 '19 at 10:06

I think I found the solution and add the answer for the people who are having the same problem like me.

In Firefox, you should not use the px units if you want to shrink your div as the screen size. Use the padding-bottom instead of a height of the image like this:

.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>

background image doesn't shrink as screen size in firefox

3 Answers3