image only showing inside of the div

Question

I have a div that has inside an image. However if the image is bigger than div, it will fill outside of the div. What i want is a mask basically.

So the image should be visible inside the limits of the div. background-image is not an option. How can be solved?

<div style="height:400px; width:400px; background-color:red">
    <img src="xxx.jpeg"/>
</div>

http://jsfiddle.net/pJC5e/

Answer 1

Try giving the parent container a overflow: hidden rule. This will cut off the image inside when it reaches the parent's boundaries.

Answer 2

Using overflow: hidden I guess ?

<div style="height:400px; width:400px; background-color:red; overflow: hidden">
    <img src="xxx.jpeg"/>
</div>

FIDDLE