为width:auto的图片添加CSS过渡效果问题求助

问题核心是CSS过渡无法在auto关键字和具体长度值之间生效，你当前代码里初始状态用width:auto，切换后改成width:80vw，这种值类型的跳变直接导致过渡失效。以下是纯CSS的解决方案：

方案思路 #

通过max-height和max-width控制图片的约束逻辑，避免直接用width:auto或height:auto作为过渡的起点/终点，让过渡在可计算的数值间进行，同时保持图片比例自适应。

完整代码示例 #

HTML #

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.1/jquery.min.js"></script>

<button class="enlargeButton">切换放大</button>
<div class="image">
  <img src="你的图片地址" alt="示例图片">
</div>

CSS #

.image img {
  /* 初始状态：以高度为约束，占80vh，宽度不超出容器 */
  max-height: 80vh;
  max-width: 100%;
  /* 为max属性添加过渡，确保平滑变化 */
  transition: max-height 600ms ease, max-width 600ms ease;
}

.image.larger img {
  /* 放大状态：以宽度为约束，占80vw，高度自适应不超出视口 */
  max-height: 100vh;
  max-width: 80vw;
}

JavaScript #

$(".enlargeButton").click(function() {
  $(".image").toggleClass('larger');
});

原理说明 #

• 初始状态下，max-height:80vh成为图片的主要约束，图片高度固定为视口80%，宽度自动缩放且不超出容器范围；
• 切换到larger类后，max-width:80vw成为主要约束，max-height:100vh确保图片高度不会溢出视口，此时图片会根据宽度自动适配高度；
• 过渡属性作用在max-height和max-width这两个可计算的数值上，因此能实现平滑的尺寸切换效果。

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