<img>与background-image尺寸表现差异及正确设置方法

一、与background-image显示差异的原因 #

本质是两者的缩放逻辑完全不同：

• <img>设置width和height为400px时，是直接强制将图片拉伸到指定尺寸，完全忽略原图的宽高比（你的原图是1600x400的宽幅图，所以会被纵向拉伸成正方形）。
• 你用background-size: cover时，这个属性的逻辑是保持图片原有宽高比，裁剪超出容器的部分，让图片填满容器。因为原图宽高比是4:1，当容器是400x400的正方形时，cover会让图片高度填满400px，宽度超出容器（实际显示图片中间400x400的区域），所以你会觉得“比例失调”——其实这是裁剪后的正常效果，并非比例问题。

二、让background-image和一样显示为正方形的方法 #

如果要完全复刻<img>强制拉伸成正方形的效果，把background-size: cover改成background-size: 100% 100%即可，这个属性会强制图片拉伸到容器的宽高尺寸，忽略原图比例：

div {
  background-color: #ccc;
  background-image: url('你的图片地址');
  background-position: center;
  background-repeat: no-repeat;
  background-size: 100% 100%; /* 替换cover为该属性 */
  width: 400px;
  height: 400px;
}

如果想保持原图比例同时显示正方形（不拉伸，只裁剪），background-size: cover是正确的，此时显示的是图片中间的正方形区域，和<img>强制拉伸的效果不同，但属于符合比例的裁剪呈现。

三、解决图片加载失败时背景色不显示的问题 #

需要注意两个关键点：

1. background-color要写在background-image前面：CSS背景属性按顺序层叠，image层在color层上方，当image加载失败时，color层就会显示出来。
2. 必须给div设置明确的尺寸：div是块级元素，默认高度由内容撑开，无内容时高度为0，所以注释掉width和height后会消失。如果不想写固定宽高，可以用padding-top: 100%实现正方形容器（基于宽度的百分比padding会维持宽高比）：

div {
  background-color: #ccc;
  background-image: url('你的图片地址');
  background-position: center;
  background-repeat: no-repeat;
  background-size: 100% 100%;
  width: 400px;
  padding-top: 100%; /* 高度等于宽度，实现正方形 */
  height: 0; /* 避免内容额外撑开高度 */
}

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