如何实现点击图片固定800px放大，再次点击还原原尺寸？

原方案用CSS transform: scale() 做图片缩放，但适配不同尺寸图片时问题明显：小图放大后还是太小，大图放大后又太大。现在把它改成点击后图片固定为800px宽，再次点击回到原尺寸，修改后的完整代码如下：

<!DOCTYPE html> 
<html lang='en-US' xml:lang='en-US'> 
<head>
<style>
body{/* 仅演示用 */
 margin:  0 auto;
 margin-top:200px;
 max-width: 640px; 
}

.click-zoom input[type=checkbox] {
  display: none
}

.click-zoom img {  
  transition: width 0.25s ease;
  cursor: zoom-in;
  max-width: 100%;
}

.click-zoom input[type=checkbox]:checked~img {
  width: 800px;
  max-width: 100%;
  cursor: zoom-out;
}
</style> 
</head>
<body>

<div class='click-zoom'> 
  <label>
      <input type='checkbox' />
          <img src='your-image-1.jpg' width="200">
  </label>
</div> 

<div class='click-zoom'> 
  <label>
      <input type='checkbox' />
          <img src='your-image-2.jpg' width="200">
  </label>
</div> 

</body> 
</html>

核心修改点： #

• 把过渡动画的属性从 transform 换成 width，让宽度变化有平滑过渡效果
• 去掉 transform: scale(2)，直接设置选中状态下图片宽度为800px
• 给图片加 max-width: 100%，避免小屏幕上放大后的图片超出可视区域
• 不设置固定高度，让图片自动保持原有比例

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