如何仅用CSS实现图片hover缩放且不影响其他元素并遵守max-width

我想要为图片添加鼠标悬停（hover）缩放效果，且缩放时能完整查看图片。

最初尝试经典的scale变换，但在移动端等小设备上，缩放后的图片会超出视口宽度：

.scaled {
  max-width: min(350px, 95%);
}

.scaled:hover {
  position: relative;
  z-index: 999;
  transform: scale(3);
  transition-delay: .5s;
}
 
.main {
  display: flex;
}
 
.main div {
  flex: 1;
}

<div class="main">
  <div>
    <p>Some other stuff that shouldn't be relocated, the 50/50 flex should be preserved</p>
  </div>
  <div>
    <img src="https://picsum.photos/600/900" class="scaled" />
  </div>
</div>

此处给:hover添加max-width不会生效，因为transform会忽略该属性。

另一种通过max-width过渡的方法会打乱桌面端的flex布局：

.scaled {
  max-width: min(350px, 95%);
}

.scaled:hover {
  max-width: 85vw;
  transition: max-width .5s ease-in-out;
  transition-delay: .5s;
}
 
.main {
  display: flex;
}
 
.main div {
  flex: 1;
}

<div class="main">
  <div>
    <p>Some other stuff that shouldn't be relocated, the 50/50 flex should be preserved</p>
  </div>
  <div>
    <img src="https://picsum.photos/600/900" class="scaled" />
  </div>
</div>

如果将max-width设为95%，又无法实现真正的缩放效果。

想问有没有办法既能保留transform“不影响DOM中其他元素”的特性，又能限制变换缩放的最大宽度？且仅用CSS实现？

可以通过动态计算缩放倍数结合transform实现需求：既保留transform不影响布局的特性，又限制缩放后的图片不超出视口范围。核心思路是用min()和calc()根据视口尺寸、图片初始尺寸计算最大允许的缩放比例，避免图片溢出。

实现代码 #

.scaled {
  --init-max-width: 350px;
  --img-ratio: 2/3; /* 图片宽高比，示例为600/900=2/3，可自定义 */
  max-width: min(var(--init-max-width), 95%);
  aspect-ratio: var(--img-ratio);
  object-fit: contain;
  transform-origin: center; /* 从中心缩放，提升视觉体验 */
  transition: transform 0.5s ease-in-out;
  transition-delay: 0.5s;
}

.scaled:hover {
  position: relative;
  z-index: 999;
  /* 计算最大缩放倍数：
     1. 不超过自定义上限3倍
     2. 缩放后宽度不超过视口95%
     3. 缩放后高度不超过视口95%
  */
  transform: scale(
    min(
      3,
      calc(95vw / min(var(--init-max-width), 95vw)),
      calc(95vh / (min(var(--init-max-width), 95vw) / var(--img-ratio)))
    )
  );
}

.main {
  display: flex;
}

.main div {
  flex: 1;
}

<div class="main">
  <div>
    <p>Some other stuff that shouldn't be relocated, the 50/50 flex should be preserved</p>
  </div>
  <div>
    <!-- 针对不同图片，修改style中的--img-ratio即可 -->
    <img src="https://picsum.photos/600/900" class="scaled" style="--img-ratio: 2/3" />
  </div>
</div>

原理说明 #

1. 不影响布局：依然使用transform: scale()，属于视觉层面的变换，不会改变文档流，flex布局的50/50比例完全保留。
2. 限制缩放范围：
   • 通过calc(95vw / min(var(--init-max-width), 95vw))计算宽度方向的最大允许缩放倍数，确保缩放后图片宽度不超过视口95%；
   • 通过calc(95vh / (min(var(--init-max-width), 95vw) / var(--img-ratio)))计算高度方向的最大允许缩放倍数，确保缩放后图片高度不超过视口95%；
   • 用min()取上述值与自定义缩放上限（3倍）中的最小值，保证图片不会溢出视口。
3. 适配灵活：通过CSS变量--init-max-width和--img-ratio，可以快速调整图片初始最大宽度，适配不同宽高比的图片。

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