div does not take height of figure/picture/img, rounding is not correct

Question

I have a couple images with the same width (338px) with different height, which should be displayed in a narrow list with the following requirements:

1. The images should be loaded in WEBP format if the browser is compatible, but the same source has to delivered, because of using CDN. (The combination of picture/source/img is used for that.)
2. The images has copyright text. (The combination of figure/figcaption is used for that.)
3. The images should be rounded.

To fulfill the requirements I am using the following HTML and CSS (See also the fiddle.):

.container {
  width: 100%;
}

.figure {
  width: 338px;
  margin: auto;
}

.picture-container {
  width: 338px;
  /* height: 203px; */
  border-radius: 32px;
  overflow: hidden;
}

<div class="container">
  <figure class="figure">
    <div class='picture-container'>
      <picture>
        <source type="image/webp" srcset="https://www.diet-health.info/images/recipes/right_list/erb-muesli-kopie-mit-haferflocken.jpg.webp">
        <source type="image/jpeg" srcset="https://www.diet-health.info/images/recipes/right_list/erb-muesli-kopie-mit-haferflocken.jpg">
        <img width="338" height="203" alt="Erb-Muesli" title="Erb-Muesli" src="https://www.diet-health.info/images/recipes/right_list/erb-muesli-kopie-mit-haferflocken.jpg">
      </picture>
    </div>
    <figcaption>
      Copyright
    </figcaption>
  </figure>
</div>

The problem is, that the <div class="picture-container"> do not take the height of it's content exactly, 207px instead of 203px and the rounding is therefore not correct. If I set the height of the <div> explicitly to 203px, it works. But that is not a solution, because the height of the images are different. How to solve that?

Answer 1

You're missing display:block on your img.

By default img-Tags are inline elements but you need it to act as a block element to make the parent div expand to its own width.

.container {
  width: 100%;
}

.figure {
  width: 338px;
  margin: auto;
}

.picture-container {
  width: 338px;
  /* height: 203px; */
  border-radius: 32px;
  overflow: hidden;
}

.picture-container img {
  display: block;
}

<div class="container">
  <figure class="figure">
    <div class='picture-container'>
      <picture>
        <source type="image/webp" srcset="https://www.diet-health.info/images/recipes/right_list/erb-muesli-kopie-mit-haferflocken.jpg.webp">
        <source type="image/jpeg" srcset="https://www.diet-health.info/images/recipes/right_list/erb-muesli-kopie-mit-haferflocken.jpg">
        <img width="338" height="203" alt="Erb-Muesli" title="Erb-Muesli" src="https://www.diet-health.info/images/recipes/right_list/erb-muesli-kopie-mit-haferflocken.jpg">
      </picture>
    </div>
    <figcaption>
      Copyright
    </figcaption>
  </figure>
</div>