Question

我的图像是267x 376，它是一个150px x 24px的div，我希望能够调整图像的哪个部分而不是顶部。

看到此信息

现在它只显示图像的左上角，但我希望能够调整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坐标，如：< / p>

.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

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

1 个答案: