如何让背景图片完全适配响应式容器且不保持宽高比？

你需要强制图片宽高完全匹配容器尺寸，不管原图片比例，以下是两种常用场景的解决方案：

场景1：使用CSS背景图 #

直接设置background-size: 100% 100%;，配合background-repeat: no-repeat;即可实现完全拉伸填满容器：

.your-container {
  width: 100%; /* 响应式宽度，可根据需求调整为百分比、vw等 */
  height: 40vh; /* 响应式高度，支持vh、百分比等单位 */
}

.your-container {
  background-image: url('你的图片路径');
  background-size: 100% 100%; /* 强制宽高都占满容器，彻底忽略原比例 */
  background-repeat: no-repeat; /* 避免图片重复填充容器 */
}

这个设置会将图片拉伸至完全贴合容器的宽和高，不管容器是横向还是纵向矩形。

场景2：使用<img>标签 #

如果直接使用<img>元素，通过设置宽高为100%并配合object-fit: none;来强制填满容器：

.your-container {
  width: 80%; /* 响应式宽度 */
  height: 300px; /* 或其他响应式单位 */
}

.your-container img {
  width: 100%;
  height: 100%;
  object-fit: none; /* 明确指定不保持宽高比，强制拉伸适配容器 */
}

如果不需要兼容旧浏览器，仅设置width: 100%; height: 100%;也可生效，多数现代浏览器会直接拉伸图片填满容器。

为什么之前的方法无效？ #

• background-size: cover：保持图片宽高比，裁剪超出容器的部分来填满容器
• background-size: contain：保持图片宽高比，完整显示图片，剩余空间会留白或重复图片
• auto/inherit等属性：默认遵循图片原有比例，不会强制拉伸

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