I have a page with a tall image at the bottom; I'd like it to cut off based on the browser's height so that the page is not scrollable (basically so that higher resolution displays show more of the image). It's something like this:

```
<div id="container" style="height:100%;">
<div> (blah blah blah) </div>
<div id="photo"><img ...></div></div>

```

And right now the img is overflowing the container so that the background is only as big as the browser screen (as it should be), but the img continues past the end of the page. How can I cut off the bottom of image so that it stops with the container?