Style external image with CSS

Question

I can't set margin: auto when I try to style the external image. I can style the padding of the body but I need this to be responsive.

body {
  background-color: #636565;
}

img {
  margin-left: auto;
  margin-right: auto;
}

<div id="map">
  <img src="https://s.w-x.co/staticmaps/wu/wxtype/none/usa/animate.png">
</div>

Answer 1

img tag must be displayed as a block element:

img{
  margin: 0 auto;
  display:block;
}

<div id="map">
        <img width="400" src="https://s.w-x.co/staticmaps/wu/wxtype/none/usa/animate.png">
    </div>

Answer 2

You should set a width: 100% to your image

img {
    width: 100%;
}

https://jsfiddle.net/ywn8eu0a/