图片宽高比与容器不一致时，必须配合object-fit: contain才能等比缩放、完整居中、留白由容器背景填充；若仅设width: 100%; height: 100%而无object-fit，图片会被强行拉伸变形。
图片宽高比和容器不一致时，用 object-fit: contain 保比例居中显示
直接给 <img> 设置 width: 100%; height: 100% 但不加 object-fit，图片会被强行拉伸变形。必须配合 object-fit: contain 才能等比缩放、完整居中、留白由容器背景填充。
前提是父容器有明确尺寸（比如 width: 400px; height: 300px），否则 contain 没参照系，行为不可控。
-
object-fit: contain：图片完整可见，按比例缩放，居中，多余空间留白 -
object-fit: cover：图片填满容器，按比例缩放后裁剪边缘，适合封面图 - 显式写上
object-position: center更稳妥，避免某些浏览器默认偏移 - 给
<img>加display: block，消除内联元素默认的底部间隙
响应式布局中防止大图撑破容器，用 max-width: 100% + height: auto
这是最通用的响应式方案，适用于卡片、文章正文等不确定父宽的场景。它不依赖父容器固定高度，也不强制图片占满空间，而是让图片“最多”等于容器宽度，高度自动按比例计算。
注意：这个组合只控制宽度上限，对高度无约束；如果图片特别高，可能造成容器被撑开——此时需额外限制父容器 max-height 或改用 object-fit 方案。
-
max-width: 100%是关键，width: 100%会强制拉满，而max-width允许图片在小屏下缩小、大屏下保持原尺寸 -
height: auto必须配对使用，否则比例断裂 - 移动端常见问题：高分辨率图加载后突然撑开布局，加
display: block可缓解底部空白抖动
全屏容器里让图片自适应且不破坏 Flex 布局，得用 position: absolute 脱离文档流
当图片放在 flex: 1 的区域里（比如顶部主图区 + 底部工具栏），仅靠 object-fit 不够——<img> 的原始尺寸仍参与 Flex 高度计算，竖图加载后会把底部区域顶下去。
真正起效的是让图片脱离布局流：父容器设 position: relative，图片设 position: absolute，再用 width: 100%; height: 100%; object-fit: scale-down 控制渲染。
-
object-fit: scale-down和contain不同：它只在图片比容器大时缩放，小时保持原尺寸，适合混合尺寸图库 - 必须设置
top: 0; left: 0，否则绝对定位后图片可能偏移或消失 - 如果希望图片始终居中（即使小于容器），补上
object-position: center
滚轮缩放图片但不影响其他元素，纯 CSS 实际做不到
很多人搜“CSS 滚轮缩放”，以为能用纯 CSS 实现 Ctrl+滚轮只缩图片。事实是：Ctrl + 鼠标滚轮 触发的是浏览器全局缩放，作用于整个页面，无法用 CSS 限定到单个 <img>。
所谓“CSS-only 滚轮缩放”方案，本质是：让图片在 100% 缩放时精准贴合容器（靠 width: 100%; height: 100%; object-fit: contain），然后靠 JS 监听滚轮事件 + transform: scale() 动态调整——CSS 只负责初始状态和视觉呈现，缩放逻辑必须交由 JS。
- 若强行用
transform: scale()纯 CSS 模拟，需配合transform-origin和伪类（如:hover），但无法响应滚轮，也不支持 Ctrl 键判断 -
zoom属性已废弃，不同浏览器兼容性差，生产环境禁用 - 容易忽略的点：缩放后溢出需靠容器
overflow: auto或scroll暴露滚动条，否则内容直接被裁掉
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
