Flexbox div has inconsistent dimensions when it contains an image

Question

.card {
  display: flex;
  border: 3px solid gray;
}

.card div {
  border: 1px dotted;
}

<div class="card">
  <div>
    <img src="https://i.stack.imgur.com/FuQYf.png">
  </div>
</div>

I set the border to 1px so the inconsistency is perceptible enough. This is what happens when the height and width of the div are not declared. The image's dimensions are 160x90, but setting those still has inconsistencies (but not the same). Here is the example:

.card {
  display: flex;
  justify-content: center;
  border: 3px solid gray;
}

.card div {
  border: 1px dotted;
  height: 90px;
  width: 160px;
}

<div class="card">
  <div>
    <img src="https://i.stack.imgur.com/FuQYf.png">
  </div>
</div>

The inconsistencies are imperceptible, but Dev Tools shows the difference (2px greater).

Is there some way to get round this? Some way to make the div's height and width exactly equal to the image's?