Position absolute parent does not have width of child image in FireFox

user_4703489 0
Viewed 475

Problem

I want the height of the <img> to be 100% of it's parent's height while proportionally scaling the width of the <img>. This is easy to do when the <img> has position absolute and works as expected. 

*, *:before, *:after { box-sizing: border-box;}
body { margin: 0; }

.hero {
  border: 2px solid red;
  position: relative;
  min-height: 360px;
}

.content {
  /* Simulate content height */
  /* height: 500px; */
}

.background {
  border: 2px solid #2EA800;
}

img {
  border: 2px solid #0083FF;
  position: absolute;
  top: 0;
  right: 0;
  height: 100%;
}
<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
  <title>Example 1</title>
</head>
<body>
  <div class="hero">
    <div class="content">
      Hey there
    </div>
    <div class="background">
      <img src="https://via.placeholder.com/200x150" alt="">
    </div>
  </div>
</body>
</html>

Example 1

But, when it is inside a parent (image container) <div> with position absolute, the parent's width is incorrectly calculated.

*, *:before, *:after { box-sizing: border-box;}
body { margin: 0; }

.hero {
  border: 2px solid red;
  position: relative;
  min-height: 360px;
}

.content {
  /* Simulate content height */
  /* height: 500px; */
}

.background {
  border: 2px solid #2EA800;
}

.background {
  position: absolute;
  top: 0;
  right: 0;
  height: 100%;
}

img {
  border: 1px solid red;
  height: 100%;
}
<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
  <title>Example 2</title>
</head>
<body>
  <div class="hero">
    <div class="content">
      Hey there
    </div>
    <div class="background">
      <img src="https://via.placeholder.com/200x150" alt="">
    </div>
  </div>
</body>
</html>

Example 2

How it should work

This only happens in FireFox. In Chrome, as expected the image container's width is correctly calculated.

Example 3

Code example in JS Fiddle (to easily open in other browsers)

css-position firefox css image html
2 Answers

Hope this will help.

.background img{
  float:right;
}
user_56392320

I've just had this problem with firefox and it's been a nightmare.

I have managed to solve it for my use case though.

In my case, I'm using an image overlay that that needed to be 100% height, and then I am using a div gradient to fill the rest of the space on the screen. Works fine in chrome as the outer absolute div kept to the size of the image and adjusted itself. Firefox behaved lik the image was the full height though, so the gradient that I needed to sit next to the image to make a seemless overlay, wouldn't work.

Praveen put me on the right track with this with his suggestion of float, so thank you Praveen!

I've got around this by using flex on my parent container and then I justified my items to flex end, so they all stack correctly in the right place. Sounds so simple writing it down, but this is such a frustrating bug!!!

user_48041980
Related