title: How do I stop an image displaying outside of the div
body: <p>Consider this code... </p>
  
  <pre><code>&lt;div id="outer" style="position:absolute;width:100px;height:100px;border:1px solid black"&gt;
    &lt;div id="inner"&gt;
      &lt;img src="http://rabbitempire.org/wp-content/uploads/Pet-Rabbit-Facts.jpg"&gt;
    &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>What style(s) do I need to add to make it so only the top left hand corner of the image is visible?</p>
  
  <p>Please note, I don;t want to use a background image because the question is really about divs, believe it or not but the rabbit isn't part of my application. Oh and in "real life" I wouldn't use inline css.</p>