How do I stop an image displaying outside of the div

You can lose the #inner div and add overflow: hidden; to the #outer div.

#outer {
  overflow: hidden;
}

You can just apply img { max-width: 100%; height: auto; } to image tag

div#outer { overflow:hidden; }​

demo here: http://jsfiddle.net/J34aJ/

It's as simple as this:

overflow: hidden;