How do I stop an image displaying outside of the div

Question

Consider this code...

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

What style(s) do I need to add to make it so only the top left hand corner of the image is visible?

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.

Answer 1

div#outer { overflow:hidden; }​ 

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

Answer 2

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