为何缩小窗口时部分div背景无响应？CSS background-size:cover疑问

嘿，看了你的代码，很快发现了导致其中一个背景图无法响应式调整的核心问题，还有个小细节可以留意：

1. 背景图片URL后缀错误 #

你给.imgb设置的背景图地址是https://mdn.mozillademos.org/files/8971/firefox_logo.pn——这里的后缀少了个g，正确的应该是.png！因为图片根本加载失败，浏览器没有可渲染的背景内容，自然看不到它跟着窗口缩放的效果。

2. 补充：块级元素宽度的潜在影响（可选排查点） #

div默认是块级元素，宽度会自动占满父容器，但如果你的div被其他样式设置了固定宽度（比如width: 800px），容器本身没法跟随窗口缩小，background-size:cover也就没机会发挥响应式作用。不过在你的代码里，这个不是当前的问题。

修正后的完整代码： #

.imga {
  height: 450px;
  background-image: url(https://img15.hostingpics.net/pics/5638130f9bd1dbafdaabbd88d207439290c1dd206e3d68f201696a5e15b2185756a209.png);
  background-size: cover;
}
.imgb {
  height: 450px;
  background-image: url(https://mdn.mozillademos.org/files/8971/firefox_logo.png); /* 修正后缀为.png */
  background-size: cover;
}

<div class="imga"></div>
<div class="imgb"></div>

把URL改对后刷新页面，再缩小浏览器窗口，两个div的背景图都会正常响应缩放，保持铺满容器且比例正确~

内容的提问来源于stack exchange，提问作者Gaylord.P