桌面端图片悬停缩放优化需求：保持宽高比、限制在屏幕内并修复交互异常

我来帮你搞定这两个悬停交互的问题，先拆解下根源，再给你修改后的代码和详细说明：

问题根源 #

1. 悬停触发范围太宽：你现在把hover事件绑在了父容器.img-scale-div上，这个容器是固定尺寸的正方形，哪怕图片因为比例问题被上下/左右裁剪，容器里的空白区域也会触发hover，导致鼠标移出图片可视区后缩放还停着。
2. 右侧图片缩放后出屏幕：统一的translate(-2vw)偏移量不适合右侧图片，缩放后向左移的距离不够，部分内容就跑到屏幕外面去了。

解决方案代码 #

下面是调整后的完整CSS，主要针对桌面端的交互逻辑修改：

.la-inversion { max-width: 100%; }
.la-inversion__izquierda img { max-width: 100%; }
.la-inversion__derecha__titulo { font-size: 3.5rem; margin-left: 2rem; margin-top: 2.5rem; }
.la-inversion__derecha__subtitulo { margin-left: 2rem; margin-top: 1rem; width: 71.5%; }
.la-inversion__derecha__imagenes { margin-top: 1rem; display: flex; justify-content: space-evenly; flex-direction: column; }
.la-inversion__derecha__imagenes__derecha { display: flex; height: 90vw; justify-content: space-evenly; }
.la-inversion__derecha__imagenes__derecha div { width: 45vw; height: 45vw; overflow: hidden; position: relative; pointer-events: none; /* 父容器不接鼠标事件 */ }
.la-inversion__derecha__imagenes__derecha div img { position: absolute; left: -1000%; right: -1000%; top: -1000%; bottom: -1000%; margin: auto; min-height: 100%; min-width: 100%; max-width: 150%; max-height: 150%; pointer-events: auto; /* 只有图片能触发交互 */ }
.la-inversion__derecha__imagenes__derecha div:nth-child(2) { align-self: flex-end; }
.la-inversion__derecha__imagenes__izquierda { display: flex; height: 90vw; justify-content: space-evenly; }
.la-inversion__derecha__imagenes__izquierda div { height: 45vw; width: 45vw; overflow: hidden; position: relative; pointer-events: none; }
.la-inversion__derecha__imagenes__izquierda div img { position: absolute; left: -1000%; right: -1000%; top: -1000%; bottom: -1000%; margin: auto; min-height: 100%; min-width: 100%; max-width: 150%; max-height: 150%; pointer-events: auto; }
.la-inversion__derecha__imagenes__izquierda div:nth-child(2) { align-self: flex-end; }
.img-scale-div{ transition: .3s; }
.img-scale-img{ transition: .3s; transform-origin: center center; /* 默认缩放原点 */ }
@media only screen and (min-width: 769px) {
  /* 给不同位置的图片设置专属缩放原点 */
  .la-inversion__derecha__imagenes__derecha div:first-child .img-scale-img,
  .la-inversion__derecha__imagenes__izquierda div:first-child .img-scale-img {
    transform-origin: left center;
  }
  .la-inversion__derecha__imagenes__derecha div:last-child .img-scale-img,
  .la-inversion__derecha__imagenes__izquierda div:last-child .img-scale-img {
    transform-origin: right center;
  }

  /* 图片悬停时触发父容器和自身的变化 */
  .img-scale-div:has(.img-scale-img:hover) {
    z-index: 2;
    align-self: center;
    outline: groove;
  }
  .img-scale-img:hover {
    transform: scale(4);
    /* 去掉position:initial，保持绝对定位不打乱布局 */
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
    margin: auto;
    min-height: 100%;
    min-width: 100%;
    max-width: none;
    max-height: none;
  }

  /* 原有桌面端样式保留 */
  .la-inversion { display: flex; -moz-column-gap: 7.5rem; column-gap: 7.5rem; width: calc( 100% - 9rem ); justify-content: center; margin: 20rem auto 0; }
  .la-inversion__izquierda { flex: 2 0 0; }
  .la-inversion__derecha { flex: 1 0 0; }
  .la-inversion__derecha__subtitulo { margin-left: 0rem; width: auto; -moz-column-count: 2; column-count: 2; font-size: 16px; -moz-column-gap: 2rem; column-gap: 2rem; -moz-column-width: 234px; column-width: 234px; }
  .la-inversion__derecha__imagenes { flex-direction: row; -moz-column-gap: 1.5rem; column-gap: 1.5rem; margin-top: 4rem; }
  .la-inversion__derecha__imagenes__derecha { height: 236px; -moz-column-gap: 1.5rem; column-gap: 1.5rem; }
  .la-inversion__derecha__imagenes__derecha__titulo { font-size: 4.5rem; text-align: center; margin-left: 0; }
  .la-inversion__derecha__imagenes__derecha div { width: 118px; height: 118px; }
  .la-inversion__derecha__imagenes__izquierda { height: 236px; -moz-column-gap: 1.5rem; column-gap: 1.5rem; }
  .la-inversion__derecha__imagenes__izquierda div { width: 118px; height: 118px; }
}

核心修改说明 #

1. 精准控制悬停触发范围 #

• 给父容器加pointer-events: none，让它不接收任何鼠标事件；
• 给图片加pointer-events: auto，确保只有鼠标真正放在图片可视区域时才触发交互；
• 用:has()选择器监听图片的hover状态，同步给父容器加层级和轮廓样式（现代桌面浏览器都支持这个选择器，如果要兼容旧版浏览器，后面给你补JS方案）。

2. 确保缩放后图片不跑出去 #

• 给左侧图片设置transform-origin: left center，右侧图片设置transform-origin: right center，这样缩放时会以各自的边缘为中心，不会往屏幕外偏移；
• 去掉原来固定的translate偏移，靠缩放原点控制位置，更灵活；
• 保留图片的绝对定位，避免position: initial打乱页面其他内容的布局。

3. 兼容旧浏览器的JS方案 #

如果你的项目需要兼容不支持:has()的浏览器，用这段JS代码代替CSS里的:has()逻辑：

document.querySelectorAll('.img-scale-img').forEach(img => {
  const parentDiv = img.closest('.img-scale-div');
  img.addEventListener('mouseenter', () => parentDiv.classList.add('hover-active'));
  img.addEventListener('mouseleave', () => parentDiv.classList.remove('hover-active'));
});

然后把CSS里的.img-scale-div:has(...)替换成：

.img-scale-div.hover-active {
  z-index: 2;
  align-self: center;
  outline: groove;
}

这样调整后，既能保证只有图片区域触发缩放，又能让所有图片缩放后都留在屏幕可视范围内，页面其他内容的位置也完全不受影响，完美符合你的需求！

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