Why <img> element is not taking the exact width that I tell with CSS?

I'm selecting an <img> element with CSS and applying a width to it, but, when I inspect the computed value of the generated element by the browser (the generated <img>), I see a different value.

Furthermore, I'm kind of confused, Am I specifying the width (with CSS) of the element's content-box instead the width of the image itself?

I'd share to you an example:

<div class="carousel-image carousel-image-fachada" id="mapaFachada">
  <img src="/images/slider/slide-home-mapa-fachada.png" alt="mapa norte-centro país Nexus" width="450" height="auto">
</div>

.carousel-image-fachada {
  @media (min-width: bulma.$desktop) {
    display: flex;
  }
  & > img {
    @media (min-width: bulma.$widescreen) {
      width: 700px;
    }
  }
}

And this is the computed value of the generated element:

In this example, is not respecting the 700px. Instead, the final result is 515.297px wide.

How do I tell with CSS that this image should be exactly 700px?

The image is a flex child in this situation, so it can be shrunk to fit the default (or defined) settings of its flex parent in the particular circumstances. To avoid that automatic shrinking, add flex-shrink: 0; to the CSS rule for the img