HTML5图片居中缩放技巧分享

• object-fit: cover：等比缩放并裁剪，填满容器（最常用）
• object-fit: contain：等比缩放并完整显示，可能有空白
• 配合 object-position: center top 可手动调裁剪锚点，默认是 center center
• 注意：IE 不支持，如需兼容得换 background-image + background-size

div 宽高固定但图片比例不定？别只靠 width 和 height

直接给 设死宽高（比如 width: 200px; height: 150px）会导致拉伸失真。关键不是限制图片本身，而是限制它的“容器盒子”并让图片在里面自适应。

• 给父
  设 width、height 和 overflow: hidden（防裁剪溢出）
• 设 width: 100%; height: 100% + object-fit: cover
• 避免给 设 max-width 或 max-height 单独使用，它和 height: 100% 冲突
• 如果父 div 是 flex 容器，记得确认子项没被 align-items 或 justify-content 干扰布局

响应式场景下图片缩放错乱？检查父容器是否脱离文档流

常见于用 position: absolute 或 float 的 div 包裹图片时，父容器高度塌陷，导致 height: 100% 失效，object-fit 就没作用对象了。

• 优先用 display: block 或 display: flex 布局，避免浮动
• 绝对定位的父 div 必须显式设 width 和 height，不能依赖内容撑开
• 媒体查询里改的是父 div 尺寸，不是图片尺寸；图片只需保持 width: 100%; height: 100%
• 用浏览器开发者工具检查 computed height，若为 0px，说明父容器没高度，先修这个

想兼容 IE 或老安卓？用 background-image 替代

object-fit 在 IE 和 Android 4.4 以下完全不可用，这时候得退回到背景图方案，但要注意语义性和可访问性损失。

• HTML 里用空
• CSS 中设 background-size: cover / contain，background-position: center
• 无法设置 alt 文本，SEO 和屏幕阅读器支持弱，重要图片慎用
• 如果必须保留 标签，可用 @supports not (object-fit: cover) 加降级样式

最易被忽略的是父容器的高度来源——它必须是明确的、非自动的。很多“图片不缩放”问题，根子不在图片属性，而在上层 div 实际高度是 0 或 auto 且没内容撑开。先查 computed height，再调 object-fit。

好了，本文到此结束，带大家了解了《HTML5图片居中缩放技巧分享》，希望本文对你有所帮助！关注golang学习网公众号，给大家分享更多文章知识！