html - 鼠标悬停时如何停止图像颤抖？

Question

我有一个带有背景图像的 div，我想要实现的是当我将鼠标悬停在 div 上时，图像应该随着过渡而减小尺寸。

但我面临的问题是，当我将鼠标悬停在 div 上时，div 正在降低高度，同时我可以看到图像看起来有点不稳定，如何 我可以避免这种情况吗？

这是一个CodePen示例。

我的 CSS:

.img-holder{
    height:217px;
    width:543px;
    background:#dedede;
    position:relative;

    -webkit-transform: scale(1);
    transform: scale(1);
    position: absolute;
    -webkit-transition: all 1s cubic-bezier(0.45, 0, 0.06, 1);
    transition: all 1s cubic-bezier(0.45, 0, 0.06, 1);
  background-image: url('https://netcomtech.co.uk/wp-content/uploads/2017/02/Workspace.jpg');
    background-size: cover;
    background-repeat: no-repeat;
}

.img-holder:hover{
    height:157px;
    opacity:0.9;
    -webkit-transform: scale(1.0) !important;
    transform: scale(1.0) !important;
}

Answer 1

.image-sect {
  width: 543px;
  height: 217px;
  display: block;
}
.img-holder{
    height:217px;
    width:100%;
    display: block;
    background:#dedede;
    position:relative;
    -webkit-transition: all 1s cubic-bezier(0.45, 0, 0.06, 1);
    transition: all 1s cubic-bezier(0.45, 0, 0.06, 1);
}
.img-holder img {
    height:100%;
    width:100%;
    object-fit: cover;
    object-position: top;
}
.bg-img{
    position: absolute;
    top: 0;
    height: 100%;
    width: 100%;
    content: "";
    display: inline-block;
    background-size: cover;
    -webkit-box-shadow: inset 0px -300px 100px 0px rgba(0, 0, 0, 0.3);
    box-shadow: inset 0px -300px 100px 0px rgba(0, 0, 0, 0.3);
}


.image-sect:hover .img-holder{
    height: 157px;
}

<div class="image-sect">
    <div class="img-holder">
        <img src="https://netcomtech.co.uk/wp-content/uploads/2017/02/Workspace.jpg" alt="" />
    </div>
</div>

<div class="image-holder">
    <div class="bg-image" />
    <div class="content">
    
    </div>
<div>