css to crop an image instead of stretching it

Question

i am taking an image from a source, say, facebook. now when i want to insert that image in a container with fixed width and height, the image stretches to fit that space. is there a way the image can display in its normal size and the rest of the area clipped out?

Answer 1

Show it as a background image

Answer 2

<div style="width: 100px; height: 100px; background-image: url(your image); background-repeat: no-repeat;"></div>

Then in the above DIV you can play with CSS

• width/height
• background-position

to create different crop effects.

Answer 3

Use this : http://www.w3schools.com/css/pr_background-position.asp

background-position: 5px 5px;

and then set the height and width of the div

height: 55px;

width: 55px;

Answer 4

You can use the CSS clip property:

#image_element
{
position:absolute;
clip:rect(0px,60px,200px,0px);
}

The downside of using clip is that the element has to be absolutely positioned, and is only available with the 'rect' shape.

See:

• http://www.w3schools.com/CSS/pr_pos_clip.asp
• http://www.cssplay.co.uk/menu/clip_gallery