How to Center an Image

Question

Currently I have an image saved in my project of a map that I would like to include in my solution, my first website. I'm very new to ASP.NET and CSS but have some HTML experience. I am having trouble figuring out how to center and stretch the image appropriately so that regardless of the size of the browser window, the center of the map always remains centered accordingly.

Please advise!

<section>
    <div class="container-fluid">
        <div class="row">
            <img src="/img/additional/map.png"/>
        </div>            
    </div>
</section>

EDIT 1:

I've found on http://getbootstrap.com/css/#images the following information

Responsive images

Images in Bootstrap 3 can be made responsive-friendly via the addition of the .img-responsive class. This applies max-width: 100%;, height: auto; and display: block; to the image so that it scales nicely to the parent element.

To center images which use the .img-responsive class, use .center-block instead of .text-center. See the helper classes section for more details about .center-block usage.

SVG images and IE 8-10

In Internet Explorer 8-10, SVG images with .img-responsive are disproportionately sized. To fix this, add width: 100% \9; where necessary. Bootstrap doesn't apply this automatically as it causes complications to other image formats.

<img src="..." class="img-responsive" alt="Responsive image">

Answer 1

Added class="img-responsive center-block" according to http://getbootstrap.com/css/#images .

<section>
    <div class="row">
        <img class="img-responsive center-block" src="/img/additional/map.png"/>
    </div>
</section>