/* 1. 容器设置：固定尺寸，隐藏溢出 */
.img-container {
/*  width: 100%; */
  width: 645px;        /*必须明确宽高，或由内容稳定撑开 */
/*  height: 500px;*/

  margin:0 auto;
  overflow: hidden;   /* 关键：裁剪放大后超出的部分 */
  border-radius: 8px; /* 可选：圆角美化 */
/*  border:1px solid red;*/
  margin-bottom:25px;
}


/* 2. 图片基础样式 */
.img-container img {
  width: 100%;
  height: 100%;
  object-fit: cover;  /* 保持比例填充，防止变形 */
  display: block;     /* 消除行内元素基线间隙，防止微小抖动 */
/*  margin:0 auto;*/

  /* 3. 过渡动画：写在常态，而非 hover 中 */
  /* 只过渡 transform，避免触发重排，提升性能 */
  transition: transform 0.3s ease; 
  
  /* 4. 缩放中心：默认为 center，显式声明更稳健 */
  transform-origin: center;
}

/* 5. 悬停状态 */
.img-container:hover img {
  transform: scale(1.5); /* 放大 10%，建议范围 1.05 - 1.2 */
}


/* 仅在支持悬停且指针精细的设备（如鼠标）上启用放大 */
@media (hover: hover) and (pointer: fine) {
  .img-container:hover img {
    transform: scale(1.1);
  }
}

/* 可选：为触屏设备提供点击反馈（:active） */
@media (hover: none) {
  .img-container:active img {
    transform: scale(1.05); /* 轻微放大，提供交互反馈 */
  }
}


@media screen and (max-width: 769px) {        
  .img-container {
      width: 100%; 
  }
  .img-container img {
      margin:0 auto;
  }
}