Html - image width=100% not working in firefox within nested flexbox

Alex
May 14, 2023
165 views
1 vote
2 Answers

I am having an issue with layouts and css between
firefox – 112.0.2
and
chromium – 112.0.5615.165

I have created a small self contained sample on codepen here
https://codepen.io/alex116/pen/JjmZPJX

.dashboard {
  display:flex;
  justify-content: center;
  align-items: center;
}
.graphic {
  display:flex;
  justify-content: center;
  align-items: center;
}
.image {
  width: 100%;
}

<div class="dashboard">
  <div class="container">
    <div class="graphic">
      <img class="image" src="https://upload.wikimedia.org/wikipedia/commons/0/02/SVG_logo.svg">
    </div>
  </div>
</div>

In chromium I see the svg image while in firefox the image has a width of 0px.

Why does that happen in firefox? Is this a bug in either browser? Am I writing invalid css?

I don’t want to change the html structure but I’ll gladly modify the css

This is part of a bigger project I’m working on and I’ve already reduced the issue to this snippet. There are more vertical columns in this layout but I’ve removed them to get to the heart of the issue.

Answers

- Rishi
- May 12, 2023 at 5:27 am
- 0 votes
0
This is my attempt to explain

The reason its not showing up in firefox is because your dashboard doesn’t have a fixed height, so its defaulting to 0.
So when your child elements (like image) try to take up a percentage width, that does work, but since the height doesn’t exist, it doesn’t show up.

So you can set a fixed height on your dashboard, but then you also have to remember that when you set a percentage width/height, it takes the % of the parent.

It is easy to visualise with background colours, so try to play around with those and see what happens (or through dev tools).
.dashboard { display: flex; justify-content: center; align-items: center; background-color: skyblue; height: 10rem; } .container { height: 100%; } .graphic { display: flex; justify-content: center; align-items: center; background-color: hotpink; height: 100%; } .image { height: 100%; }

<div class="dashboard"> <div class="container"> <div class="graphic"> <img class="image" src="https://upload.wikimedia.org/wikipedia/commons/0/02/SVG_logo.svg"> </div> </div> </div>
Login or Signup to reply.

- SandyM
- May 12, 2023 at 6:31 am
- 0 votes
0
Whenever you need to work with images, make them responsive. Once they are, control the height and width with the parent div. This will ensure that the image gets displayed in the same resolution for all devices. Also, on multiple devices, you only need to change the height and width of parent div to make the image appear better without any worries of image getting pixelated. And this works for all the browsers.

Responsive Images

CSS:
```
// change the size of parent div to modify image
.graphic {
  width: 5rem;
  height: 5rem;
}


.image {
  width: 100%;
  height: auto;
}
```
Login or Signup to reply.