How to let a img tag fill it's parent node?

Question

Now I have this:

.image-container {
  margin: 10px auto !important;
  width: 300px;
  background: red;
}

img {
  max-width: 100%;
}

<figure class="image-container">
  <img src="https://lasenhorita.github.io/assets/images/hero/low/HERO_SADNESS_H_0001.jpg">
</figure>

Under the img (image size: 800x520) tag, there is a space I don't know how to remove.

Can anyone help?

Answer 1

add display:flex to .image-container

.image-container {
  display: flex;
  margin: 10px auto !important;
  width: 300px;
  background: red;
}

img {
  max-width: 100%;
}

<figure class="image-container">
  <img src="https://lasenhorita.github.io/assets/images/hero/low/HERO_SADNESS_H_0001.jpg">
</figure>

Answer 2

By default, an image is an inline level element (display: inline-block). All inline level elements have some extra default spacing in all directions (4px). That is why you have this space down there.

All you need to do is to set the image to display:block.

You can find the same issues throughout stackoverflow though, so try to maybe google it first if possible.

For example: Remove white space below image

Edit: typos