Question

.featured-items__image-container {
    height: 250px;
    overflow: hidden;
    width: 370px;
}

.featured-items__item-image {
    @include animate(all, 500ms);
    cursor: pointer;
    height: 100%;
    width: 100%;
}
.featured-items__item-image:hover {
    height: 120%;
    width: 120%;
}

<div class="featured-items__image-container">
    <img class="featured-items__item-image" src="https://unsplash.it/370/250"/>
</div>

所以在悬停时，我的宽度和高度都增加了20％。哪个效果很好。但是图像没有居中，这就是我正在努力的方向。因此，在缩放图像时，只是向右“增长”。有什么提示吗？

Answer 1

试试这个：

.featured-items__image-container {
    height: 250px;
    overflow: hidden;
    width: 370px;
}

.featured-items__item-image {
    @include animate(all, 500ms);
    cursor: pointer;
    height: 100%;
    width: 100%;
}
.featured-items__item-image:hover {
    height: 120%;
    width: 120%;
    margin-left:-10%;
    margin-top:-10%;
}

<div class="featured-items__image-container">
    <img class="featured-items__item-image" src="https://unsplash.it/370/250"/>
</div>

Answer 2

您还可以对图像应用相对定位，并将左侧，顶部分别设置为-10％， - 10％，这将使图像从预期位置移动并获得所需的输出。

.featured-items__item-image:hover {
    height: 120%;
    width: 120%;
    position:relative;
    left:-10%;
    top:-10%;
}

Answer 3

与其更改高度，不如在transform属性中使用“ scale”（缩放），它将自动使缩放居中。

.featured-items__image-container {
    height: 250px;
    overflow: hidden;
    width: 370px;
}

.featured-items__item-image {
    @include animate(all, 500ms);
    cursor: pointer;
    height: 100%;
    width: 100%;
}

.featured-items__item-image:hover {
   transform: scale(1.2)
}

图像放大悬停，保持图像居中

3 个答案: