仅用CSS实现图片Ctrl+滚轮缩放，默认100%时适配容器且其他元素不变

问题说明 #

需要实现以下效果：

• 仅通过CSS让容器内的图片支持Ctrl+鼠标滚轮缩放，页面其他元素（如容器边框）大小保持不变
• 默认缩放（100%）状态下，图片需完全适配宽80vw、高80vh的容器
• 支持多档缩放级别，图片超出容器范围时显示滚动条

当前代码存在的问题：默认缩放状态下图片无法适配容器尺寸。

解决方案 #

核心思路：

1. 默认状态下通过object-fit: contain结合宽高100%，让图片按原始比例完整适配容器
2. 利用浏览器原生缩放逻辑配合容器固定尺寸，确保仅图片响应Ctrl+滚轮操作，其他元素大小不变
3. 容器设置overflow: scroll，处理图片缩放后超出容器的部分

完整代码示例 #

CSS代码 #

* {
  margin: 0;
}

body {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100vh;
}

#container {
  border: 0.8vh solid #39d662;
  background-color: #39d662;
  width: 80vw;
  height: 80vh;
  overflow: scroll;
  flex-shrink: 0;
}

#container>img {
  width: 100%;
  height: 100%;
  /* 保持图片比例，完整适配容器 */
  object-fit: contain;
  /* 缩放原点设为左上角，配合滚动条定位更准确 */
  transform-origin: top left;
}

HTML代码 #

<div id="container">
  <!-- 支持任意尺寸的图片 -->
  <img src="https://picsum.photos/1920/1080">
</div>

补充说明 #

• object-fit: contain保证图片按原始比例缩放，不会出现拉伸变形，同时完整显示在容器内
• 容器使用vw/vh单位，确保其大小始终相对于视口固定，不受图片缩放影响
• transform-origin: top left确保图片缩放时以左上角为基准，配合容器滚动条可以精准查看图片的各个区域
• 若需要平滑的缩放过渡效果，可给图片添加transition: transform 0.2s ease（注：该效果需结合JS监听滚轮事件修改transform: scale()值实现，超出纯CSS范围）

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