解决图片容器宽度过渡时封面图片缩放异常问题

我正在实现一个鼠标悬停过渡效果：当鼠标悬停时，增大图片容器宽度并让图片适配容器，过渡效果为从左到右增加宽度。目前宽度过渡正常，但图片出现了缩放异常的情况，不清楚原因，希望得到帮助。

期望实现的过渡效果：

以下是我的HTML和CSS代码：

原CSS代码 #

@import url('https://fonts.googleapis.com/css2?family=Montserrat&family=Roboto&family=Shantell+Sans:ital,wght@1,300&display=swap');

* {
    padding: 0;
    margin: 0;
    box-sizing: border-box;
   
}
:root{

--small : url("https://i.ibb.co/1MYMcPX/MV5-BY2-Q1-Zj-Bj-MTMt-Nj-Qx-OS00-OTRk-LThm-Zj-Ut-ZWUy-Mz-Vh-MTA4-MGE1-Xk-Ey-Xk-Fqc-Gde-QXVy-NTgx-ODY.jpg");
--image : url("https://i.ibb.co/TMn41Gs/ezgif-com-gif-maker.jpg");
}
body {
    min-height: 100vh;
    display: flex;
    justify-content: center;
    align-items: center;
    
}
body::after{
    position:absolute; 
    width:0; 
    height:0; 
    overflow:hidden;
     z-index:-1; 
    content: var(--image)
 }
.container{
   
    white-space: nowrap;
    overflow-x: scroll;
    scrollbar-width: none;
    justify-content: flex-start;
    width: 600px;
}
.container::-webkit-scrollbar {
    width: 0;
    height: 0;
  }
.item{
    display: inline-block;
    height: 160px;
    width: 130px;
  position: relative;
    transition: all 0.5s linear;
}
img{
  position: absolute;
    object-fit: cover;
    height: 100%;
    width: 100%;
    border-radius: 0.5rem;
    transition: opacity 0.5s linear;
}
img:nth-child(1){
    opacity: 1;
}
img:nth-child(2){
    opacity: 0;
}
.item:hover{
   width: 300px;
}
.item:hover img:nth-child(1){
    opacity: 0;
}
.item:hover img:nth-child(2){
    opacity: 1;
}

原HTML代码 #

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="style.css">
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.4/jquery.min.js"
        integrity="sha512-pumBsjNRGGqkPzKHndZMaAG+bir374sORyzM3uulLV14lN5LyykqNk8eEeUlUkB3U0M4FApyaHraT65ihJhDpQ=="
        crossorigin="anonymous" referrerpolicy="no-referrer"></script>
    <title>Goggle movies</title>
    <script src="index.js" defer></script>
</head>

<body>
    <div class="container">
        <div class="item">
          <img src="https://i.ibb.co/1MYMcPX/MV5-BY2-Q1-Zj-Bj-MTMt-Nj-Qx-OS00-OTRk-LThm-Zj-Ut-ZWUy-Mz-Vh-MTA4-MGE1-Xk-Ey-Xk-Fqc-Gde-QXVy-NTgx-ODY.jpg" alt="" srcset="">
          <img src="https://i.ibb.co/TMn41Gs/ezgif-com-gif-maker.jpg" alt="" srcset="">
        </div>
        <div class="item">
            <img src="https://i.ibb.co/1MYMcPX/MV5-BY2-Q1-Zj-Bj-MTMt-Nj-Qx-OS00-OTRk-LThm-Zj-Ut-ZWUy-Mz-Vh-MTA4-MGE1-Xk-Ey-Xk-Fqc-Gde-QXVy-NTgx-ODY.jpg" alt="" srcset="">
            <img src="https://i.ibb.co/TMn41Gs/ezgif-com-gif-maker.jpg" alt="" srcset="">
        </div>
        <div class="item">
            <img src="https://i.ibb.co/1MYMcPX/MV5-BY2-Q1-Zj-Bj-MTMt-Nj-Qx-OS00-OTRk-LThm-Zj-Ut-ZWUy-Mz-Vh-MTA4-MGE1-Xk-Ey-Xk-Fqc-Gde-QXVy-NTgx-ODY.jpg" alt="" srcset="">
            <img src="https://i.ibb.co/TMn41Gs/ezgif-com-gif-maker.jpg" alt="" srcset="">
        </div>
        <div class="item">
            <img src="https://i.ibb.co/1MYMcPX/MV5-BY2-Q1-Zj-Bj-MTMt-Nj-Qx-OS00-OTRk-LThm-Zj-Ut-ZWUy-Mz-Vh-MTA4-MGE1-Xk-Ey-Xk-Fqc-Gde-QXVy-NTgx-ODY.jpg" alt="" srcset="">
            <img src="https://i.ibb.co/TMn41Gs/ezgif-com-gif-maker.jpg" alt="" srcset="">
        </div>
    </div>
</body>

</html>

问题原因与修复方案 #

问题出在图片的定位和尺寸计算逻辑：容器宽度变化时，两张图片都以100%宽高适配容器，object-fit: cover会实时重新计算裁剪区域，叠加透明度切换的过渡，就会出现视觉上的缩放异常。

要实现示例中的平滑过渡，调整如下：

1. 给.item添加overflow: hidden，限制图片显示范围
2. 让hover时显示的图片初始宽度等于容器目标宽度，通过left: 100%隐藏在容器右侧，hover时把left设为0，配合容器宽度过渡实现从左到右展开的效果
3. 明确过渡属性，避免不必要的属性触发过渡

修改后的CSS代码：

@import url('https://fonts.googleapis.com/css2?family=Montserrat&family=Roboto&family=Shantell+Sans:ital,wght@1,300&display=swap');

* {
    padding: 0;
    margin: 0;
    box-sizing: border-box;
}
:root{
--small : url("https://i.ibb.co/1MYMcPX/MV5-BY2-Q1-Zj-Bj-MTMt-Nj-Qx-OS00-OTRk-LThm-Zj-Ut-ZWUy-Mz-Vh-MTA4-MGE1-Xk-Ey-Xk-Fqc-Gde-QXVy-NTgx-ODY.jpg");
--image : url("https://i.ibb.co/TMn41Gs/ezgif-com-gif-maker.jpg");
}
body {
    min-height: 100vh;
    display: flex;
    justify-content: center;
    align-items: center;
}
body::after{
    position:absolute; 
    width:0; 
    height:0; 
    overflow:hidden;
     z-index:-1; 
    content: var(--image)
 }
.container{
    white-space: nowrap;
    overflow-x: scroll;
    scrollbar-width: none;
    justify-content: flex-start;
    width: 600px;
}
.container::-webkit-scrollbar {
    width: 0;
    height: 0;
}
.item{
    display: inline-block;
    height: 160px;
    width: 130px;
    position: relative;
    overflow: hidden; /* 新增：隐藏超出容器的部分 */
    transition: width 0.5s linear; /* 明确只过渡宽度 */
}
img{
    position: absolute;
    object-fit: cover;
    height: 100%;
    border-radius: 0.5rem;
    transition: all 0.5s linear;
}
img:nth-child(1){
    width: 100%; /* 初始图宽度匹配容器 */
    opacity: 1;
}
img:nth-child(2){
    width: 300px; /* 固定为容器目标宽度 */
    left: 100%; /* 初始隐藏在容器右侧 */
    opacity: 0;
}
.item:hover{
   width: 300px;
}
.item:hover img:nth-child(1){
    opacity: 0;
}
.item:hover img:nth-child(2){
    left: 0; /* 移入容器内 */
    opacity: 1;
}

效果说明 #

• 容器宽度从130px平滑过渡到300px
• 第二张图从容器右侧同步移入，避免了缩放异常
• 两张图的透明度无缝切换，实现和示例一致的过渡效果

内容的提问来源于stack exchange，提问作者gaito Uzumaki