html - 调整固定高度容器中的图像位置

Question

我有一张 267x 376 的图像，它位于 150px x 24px 的 div 中，我希望能够调整显示图像的哪个部分，而不仅仅是顶部。

你可以在这里看到这个http://jsfiddle.net/h8BKc/

现在它只显示图像的左上角，但我希望能够调整图像在 div 中显示的部分，因此我会将试图查看的图像部分向下移动到卡片的实际图像部分。

HTML:

<div class="deck-card-container">
    <div class="deck-list-card-img">
        <img src="http://hearthable.com/images/cards/1.png">
     </div>
</div>

CSS:

.deck-card-container{
    margin-bottom: 5px;
}

.deck-list-card-img{
    height: 24px;
    width:150px;
    overflow: hidden;
}

Answer 1

给.deck-list-card-img类position:relative，然后是里面的图片，.deck-list-card-img img 、position:absolute 和top 和left 坐标如下:

.deck-list-card-img{
    height: 24px;
    width:150px;
    overflow: hidden;
    position:relative;
}
.deck-list-card-img img {
    position:absolute;
    top:-40px;
    left:-40px;
}

jsFiddle example