Showing only a part of image in div using css

Question

What I have :
I have a div of width 200px X 200px
and image inside it of size 400px X 400 px.

What I want to do :
I want to show only a part of image inside div Is it possible using only css.If not ? Then what are the other ways
(Note : I don't want to set image to background of the div)

What I have done so far :
Fiddle : http://jsfiddle.net/5Hbr3/1/

<div id="sample">
    <img src="image.jpg" /> 
</div>

I want to show image from 100,100 to 300,300.
and scrollbar should disappear.
Any help will be appreciated.

Thanks

Solution 1

Use position: relative on the parent element and position: absolute on the child images.

#sample {
  width: 200px;
  height: 200px;
  overflow: hidden;
  position: relative;
  border: 1px solid black;
}

#sample img {
  position: absolute;
  top: -100px;
  left: -100px;
}

<div id="sample">
  <img src="data:image/jpeg;base64,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"
  />
</div>

To make the scrollbar disappear, use overflow: hidden (as in the JSFiddle)

Solution 2

Here is a method to tackle your problem:

http://jsfiddle.net/5Hbr3/5/

#sample{
    background: url(image-data.jpg);
    background-position: -100px -100px;
    width: 200px;
    height: 200px;
}

This method allows you to achieve the same result using one element instead of two, and is also cross-browser compatible. I'd recommend this approach instead of absolutely positioning the image inside the container div.

Comments

[Nagesh Salunke]

Alfred Xing : if appropriate part of image is shown.I will not need to use overflow : hidden check : jsfiddle.net/5Hbr3/6

[Nagesh Salunke]

I mentioned in question that I dont want to set image to background of div.

[psychobunny]

missed that - so Alfred's answer is the way to go in that case

[Alfred Xing]

@panda That's just to make sure the scrollbars don't show if you have a larger image: jsfiddle.net/5Hbr3/7

[andilabs]

@nagesh What motivated you towards " I don't want to set image to background of the div" attitude? Are there some disadvantages of such approach?

[Nagesh Salunke]

@andi : image tags such as <map> wont work when set as background.