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.it/600x300" alt="" class="img">

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

<img src="http://placehold.it/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.it/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.it/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.it/600x200" alt="" class="img">
<figcaption class="fig-caption">A caption for the above image.</figcaption>
</figure>

SASS

Reference from _img.scss

$img-radius: rem(2);
$img-caption-color: lighten(map-get($colors, dark), 40%);