如何实现元素hover缩放时不影响其他元素位置？

问题出在你hover时同时修改了max-width和使用transform:scale——前者会改变图片的实际占位尺寸，直接导致周围元素移位；后者只是视觉放大，不会影响布局。结合你需要的居中带边距布局，用以下方案解决：

核心修改思路 #

1. 移除hover状态下的max-width修改，只保留transform:scale实现放大效果（transform不会改变元素的盒模型占位）
2. 使用Flexbox实现图片的居中布局，同时灵活控制间距

修改后的代码 #

HTML

<div class="image-container">
  <img src="https://www.tazzadesign.com/wp-content/uploads/sites/65/2013/11/dummy-image-square.jpg">
  <img src="https://www.tazzadesign.com/wp-content/uploads/sites/65/2013/11/dummy-image-square.jpg">
  <img src="https://www.tazzadesign.com/wp-content/uploads/sites/65/2013/11/dummy-image-square.jpg">
</div>

CSS

body {
  background-color:#1a1a1a;
  margin: 0;
}

.image-container {
  display: flex;
  justify-content: center;
  padding: 50px 20px; /* 上下内边距模拟原布局的margin，左右内边距适配小屏幕 */
  gap: 50px; /* 控制图片之间的间距，替代img的margin更易维护 */
}

img {
  width: 15%;
  transition-duration: 0.5s;
  transform-origin: top;
  border-radius: 25px;
}

img:hover {
  transform: scale(1.1);
  cursor: pointer;
}

补充说明 #

• 如果需要图片在小屏幕上自适应，可以把img的width换成max-width:15%，hover时依然不要修改这个属性
• 若偏好使用margin控制间距，可移除.image-container的gap，给img设置margin: 0 25px，效果一致

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