如何用CSS实现鼠标悬停图片放大，同时避免容器向下拉伸

问题原因 #

transform: scale本身不会改变元素在文档流的占位尺寸，容器拉伸一般是两个原因导致：

1. img默认是行内块元素，底部存在和文字基线对齐的空白间隙
2. 外层容器没有固定宽高比约束，高度自适应时误跟随图片视觉变化调整

解决方案 #

方案1（现代浏览器兼容）

用aspect-ratio锁定容器宽高比，代码修改如下：

.zoom-img {
  width: 300px;
  overflow: hidden;
  /* 按你的图片比例调整，示例图为4:3就写4/3，16:9就写16/9 */
  aspect-ratio: 4/3;
}

.zoom-img img {
  /* 消除行内元素底部空白 */
  display: block;
  width: 100%;
  height: 100%;
  /* 保证图片铺满容器不变形 */
  object-fit: cover;
  transition: all .3s ease-in-out;
}

.zoom-img img:hover {
  transform: scale(1.2);
}

方案2（兼容旧浏览器）

如果需要兼容不支持aspect-ratio的低版本浏览器，用padding占位法实现固定宽高比：

.zoom-img {
  width: 300px;
  overflow: hidden;
  position: relative;
  /* 4:3比例对应75%，计算方式：高度/宽度*100%，按需调整 */
  padding-top: 75%;
}

.zoom-img img {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: all .3s ease-in-out;
}

.zoom-img img:hover {
  transform: scale(1.2);
}

原有HTML代码不需要修改，修改后容器会保持固定宽高比，图片放大时超出部分会被自动裁剪，不会出现容器拉伸问题。

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