直接用width/height属性会导致图片拉伸变形、响应式失效；应改用CSS的object-fit或背景图方案实现等比缩放与裁剪。
用 width 和 height 强制统一尺寸会出什么问题
直接写 <img src="a.jpg" style="max-width:90%" style="max-width:90%" alt="如何使图片大小一样html5" > 看似简单，但图片会被强行拉伸或压扁，尤其当原始宽高比不一致时。浏览器不会自动裁剪或居中，只是粗暴缩放像素——结果是人脸变胖、文字模糊、图标变形。
更麻烦的是，这种内联属性在响应式页面里几乎失效：手机上图片可能撑破容器，而 width/height 属性又不支持百分比+max-width 的组合行为。
- 别用
width和height属性（HTML 属性，不是 CSS）来“统一大小” - 优先用 CSS 控制尺寸和裁剪逻辑
- 如果必须保留原始比例，就别设固定
height，只设width或max-width
让不同图片显示为相同尺寸且不变形的 CSS 方案
核心是两步：固定容器尺寸 + 图片作为背景或使用 object-fit。前者兼容性好，后者更语义化但 IE 不支持。
推荐用 <div class="img-box"><img src="..." alt="如何使图片大小一样html5" ></div> 结构，然后：
立即学习“前端免费学习笔记（深入）”；
- 给
.img-box设固定宽高，比如width: 200px; height: 150px; - 给
img加width: 100%; height: 100%; object-fit: cover;—— 这会让图片等比缩放后居中裁剪，填满整个盒子 - 若要完整显示（不裁剪），把
cover换成contain，但可能留白
示例：
img {
width: 100%;
height: 100%;
object-fit: cover;
object-position: center;
}
object-fit 在 Safari 和旧版 Edge 中不生效怎么办
IE 完全不支持，Safari 从 10.1 才开始支持，部分安卓 WebView 也有 bug。这时候得降级到背景图方案。
- 把图片路径挪到 CSS 的
background-image里 - 用
background-size: cover或contain替代object-fit - 记得加
background-position: center防止偏移 - 需要点击/alt 文字/SEO 的场景，背景图就不合适了——得权衡
简写示例：
.img-box {
width: 200px;
height: 150px;
background-image: url("photo.jpg");
background-size: cover;
background-position: center;
}
批量处理时怎么避免手动写一堆 class
如果页面有几十张图要统一样式，别一个个加 class。用属性选择器或通用类名更省事。
- 给所有需统一样式的
img加统一 class，比如class="thumbnail"，然后全局定义样式 - 用属性选择器匹配特定路径：
img[src^="/uploads/"]可以选中所有上传目录下的图 - 注意：不要用
img { ... }全局重置，会影响头像、图标等其他图片 - 如果用 JS 动态插入图片，记得插入后也补上对应 class 或 style
真正难的不是让尺寸一样，而是让“看起来一样”——比例、焦点、加载失败占位、暗色模式适配，这些都得在统一尺寸之外单独考虑。
