CSS动画调整：解决图像偏移问题实现放大填充两倍大固定表格

核心问题点 #

• 无效容器样式：body 内的 table: 1181px 555px; 不是合法CSS属性，无法约束容器实际尺寸
• 错误定位方式：用 padding 偏移图片位置，会被 transform: scale 整体缩放，直接导致向右下偏移
• 缩放比例不匹配：写死的3.0倍缩放和1181px×555px容器、567px×378px原图的尺寸差不匹配，无法刚好填满
• 缺少溢出裁剪：放大后超出容器的内容没有隐藏，放大过程中会溢出到容器外造成视觉偏移

修正后可运行代码 #

<style type="text/css">
body{
    background-color: #1c1c1c;
}
/* 目标表格/容器样式，替换为你实际的表格类名/ID */
.target-table-container{
    width: 1181px;
    height: 555px;
    position: relative;
    /* 隐藏放大后超出容器的部分，避免溢出 */
    overflow: hidden;
}

#img{
  /* 去掉原来的padding，用绝对定位固定位置，不会被缩放影响 */
  position: absolute;
  /* 保留你需要的初始偏移位置，要左上角对齐就改成0 */
  top: 250px;
  left: 340px;
  transform-origin: left top;
  animation: zoomInFill 6s ease-in-out forwards;
  /* 保持图片比例不拉伸，多余部分由容器overflow裁剪 */
  object-fit: cover;
}

@keyframes zoomInFill {
  0% {
    transform: scale(1);
  }
  100% {
    /* 计算后的精确缩放值：max(1181/567≈2.08, 555/378≈1.47)≈2.08，刚好填满容器 */
    transform: scale(2.08);
  }
}
</style>

补充说明 #

• 如果需要图片初始就放在容器左上角，直接把 #img 的 top、left 值改成 0 即可
• 如果允许图片轻微拉伸适配容器宽高，可去掉 object-fit: cover，把最终缩放值拆成 scaleX(2.08) scaleY(1.47)，就能完全无留白填满
• 动画的 ease-in-out 是为了实现缓慢放大的平缓效果，可根据需要换成其他动画曲线

内容的提问来源于stack exchange，提问作者Rich J