为何相同URL样式应用于<div>与<img>时效果不一致？

核心原因 #

<div>作为块级容器使用背景图时，你设置的宽高会直接约束容器尺寸，再通过background-size（比如cover/contain）控制背景图的适配方式，自然能保持图片比例。而<img>是替换元素，本身自带固有宽高比，如果你直接给它设置固定宽高却没指定object-fit，浏览器会强制把图片拉伸到设定的尺寸，导致变形。

解决方案 #

你只需要给<img>添加object-fit属性，让它和背景图的适配逻辑对齐：

// 和div的背景图效果一致的img样式
img {
  width: 200px;
  height: 200px;
  object-fit: cover; // 对应background-size: cover，按比例填充容器，超出部分裁剪
  // 或者用object-fit: contain; 对应background-size: contain，完整显示图片，容器留空
}

如果不想裁剪图片，也可以让img自适应比例，不设置固定高度：

img {
  width: 200px;
  height: auto; // 按图片固有比例自动计算高度
}

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