1

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.

Alex
  • 619
  • 1
  • 8
  • 25
  • it's a bit tricky to explain but both can be correct. Better define a fixed width and consider max-width: 100% with it – Temani Afif May 12 '23 at 00:29

2 Answers2

1

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>
rishi
  • 652
  • 1
  • 6
  • 20
  • 1
    Hi @rishi, this seems to work to make it visible in firefox but it has the drawback of not scaling when squished from the side. Technically it is correct that it makes it show up but it doesn't behave the same way. I'd really like it to scale when the window is smaller. That is what flexbox usually does very well but for some reason setting height to 100% makes it so it always stays that size even when squeezed. Chrome does what I want in the first example I posed. – Alex May 12 '23 at 23:41
  • @Alex If you want it to scale on smaller sizes, I believe setting `width: 100%;` on `.image` will do the trick. Since It will scale according to its parent, even on the widths' axis. – rishi May 13 '23 at 03:58
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;
}
Sandy M
  • 138
  • 7