Fit images responsive

I’d like to fit images I set into the content to 100% width.
Everything I 've had found within the boarch search was to difficult to implement for me.
I could follow the code partly but not where to implement.
Hugo refused to start the server

Though it would be awesome to have automatic image processing, at the moment it would be enough for me to get a large image fit to 100% width.
I changed the .img class at _reboot.scss but that affects all other images.

Do you have a beginner friendly entry solution to that topic?

I prefer the hugo way with markdown shortcuts but a CSS only solution would be also fine.

Have you tried doing it through plain ole CSS?

img {
  max-width: 100%;
}

No, not yet.
Meanwhile I have found two solutions.
What do you think about?

{{< figure src="/image-1.jpg" alt="text" width="100%" >}}

{{< figure src="/image-1.jpg" alt="text" class="img-fluid" >}}

Those looks fine.
You’d just have to specify the style for every img element vs specifying once in your CSS file.

img {
max-width: 100%;
}

works too.
Thank you very much!