How do I stop an image displaying outside of the div

Answer 1

Add overflow: hidden to your #outer rule: http://jsfiddle.net/saluce/qJWte/

<div id="outer" style="position:absolute;width:100px;height:100px;border:1px solid black; overflow: none">
  <div id="inner">
    <img src="http://rabbitempire.org/wp-content/uploads/Pet-Rabbit-Facts.jpg">
  </div>
</div>​

Answer 2

div#outer { overflow:hidden; }​

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

Answer 3

re-write your outer div style to apply overflow:hidden

<div id="outer" style="position:absolute;width:100px;height:100px;border:1px solid black; overflow:hidden;">
      <div id="inner">
        <img src="http://rabbitempire.org/wp-content/uploads/Pet-Rabbit-Facts.jpg">
      </div>
    </div>

Answer 4

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

Answer 5

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

#outer {
  overflow: hidden;
}

Answer 6

It's as simple as this:

overflow: hidden;