使用css仅在div中显示图像的一部分

Question

我拥有:
我的宽度为200px X 200px的div
和尺寸为400px X 400 px的图像.

我想做什么:
我想只在div中显示图像的一部分是否可以只使用css.如果没有？那么其他方法是什么
(注意:我不想将图像设置为div的背景)

到目前为止我做了什么:
小提琴:http://jsfiddle.net/5Hbr3/1/

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

我想显示从100,100到300,300的图像.
和滚动条应该消失.
任何帮助将不胜感激.

谢谢

Answer 1

使用position: relative父元素和position: absolute对孩子的图像.

要使滚动条消失,请使用overflow: hidden(如在JSFiddle中)

Answer 2

这是解决问题的方法:

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

此方法允许您使用一个元素而不是两个元素来实现相同的结果,并且还与跨浏览器兼容.我推荐这种方法,而不是将图像绝对定位在容器div中.