Image

Simply add img class to image. After you apply this class it will no longer exceed it's container width

<img src="http://placehold.co/600x300" alt="" class="img">

Add rounded along with img class to be default 2px border radius.

<img src="http://placehold.co/600x300" alt="" class="img rounded">

No matter what is image size, it will be 100% width - once you add class img-full-width to img tag.

<img src="http://placehold.co/1000x500" alt="" class="img-full-width">

Now, you want to place a image but it needs to be centered along with caption

<figure class="fig-center">
    <img src="http://placehold.co/200x150" alt="" class="img">
    <figcaption class="fig-caption">A caption for the above image.</figcaption>
</figure>

Well, if you don't want image to be centered

<figure class="fig">
    <img src="http://placehold.co/600x200" alt="" class="img">
    <figcaption class="fig-caption">A caption for the above image.</figcaption>
</figure>

SASS reference

$img-radius: $global-border-radius !default;

--r-img-radius: #{$img-radius};
--r-img-caption-color: var(--r-color-dark-lighten-40);