如何实现容器内图片hover时缩放且容器本身不发生尺寸变化？

你需要的效果可以通过给外层容器设置overflow: hidden，配合图片的transform: scale()实现，代码如下：

HTML 结构（和你提供的一致） #

<div class="container">
  <img class="img" src="" />
</div>

CSS 样式 #

.container {
  /* 按需求自定义容器宽高 */
  width: 300px;
  height: 200px;
  /* 核心属性：隐藏图片缩放后超出容器的部分 */
  overflow: hidden;
}

.container .img {
  width: 100%;
  height: 100%;
  /* 可选：保持图片比例不变形，填满容器 */
  object-fit: cover;
  /* 加过渡动画，缩放效果更丝滑 */
  transition: transform 0.3s ease;
}

.container:hover .img {
  /* 缩放倍数可自行调整，1.2即放大20% */
  transform: scale(1.2);
}

实现原理 #

transform属性属于视觉渲染层的变换，不会修改元素在文档流中实际占用的空间，所以容器的尺寸不会受到图片缩放的影响，配合外层容器的overflow: hidden，超出容器范围的放大区域会被直接裁剪，就实现了图片缩放、容器尺寸不变的效果。

内容的提问来源于stack exchange，提问作者Shahir Riaz