Question 167435 in Html Question posted in
Some basic documentation can be found here.

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

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.

Tags:

2

Answers


  1. 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.
  2. 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.
Please signup or login to give your own answer.

Back To Top
Search