If I have an image with a div wrapped around it, how do I make it only show a certain section of the image?

Question

If I have an image with a div wrapped around it, how do I make it only show a certain section of the image?

<div id=#container"><img src="hello.jpg" /></div>

Lets say I want the image to only display a width of 200px and a height of 200px. I also want it to start showing it 10pixels from the top, and 30 pixels to the left.

Answer 1

#container {
    width: 200px;
    height: 200px;
    overflow: hidden
}
#container img {
    margin: -10px 0 0 -30px
}

Answer 2

You could put it as a background-image for the div, make it a block with set width/height & use background-position to get the position you wanted.

Answer 3

If your <div id="#container"> is absolutely positioned, you can use the clip property:

#container {
    /* top, right, bottom and left points of the rectangle */
    clip: rect(10px, 230px, 210px, 30px);
}

The above would create a rectangular clip with its top-left corner 10px from the top and 30px from the left. Its bottom-right corner is 210px from the top and 230px from the left (which gives you your 200px of width and height).

You can read more about it in this article.

Answer 4

#container {
    padding-top  : 10px;
    padding-left : 30px;

}
#container img {
    width        : 200px;
    height       : 200px;
}

Image won't be stretched:

#container img {
    max-width    : 200px;
    max-height   : 200px;
}