移动端Banner图片不响应适配问题求助

我来帮你搞定这个Banner适配的问题！你之前用background-size: contain虽然能显示完整图片，但因为要严格保持图片比例，容器没被填满才会出现上下空白。要让图片完全填充对应的div，我们可以用以下几种实用方法：

方法1：用background-size: cover实现全屏填充 #

cover属性会让图片按比例拉伸，完全覆盖容器区域，超出容器的部分会被合理裁剪，这样就不会留下空白了。同时搭配background-position: center确保图片的核心内容居中显示，避免关键信息被裁掉：

div.masthead-banner.data-bg {
  background-size: cover !important;
  background-position: center center !important;
}

方法2：固定容器比例（避免高度塌陷） #

如果你的Banner容器高度不固定，可能会出现图片显示不全或者容器高度异常的情况。可以根据你的Banner图片的宽高比，用padding-top的百分比技巧来固定容器比例（CSS中padding的百分比是基于容器宽度计算的）：

比如你的Banner是16:9的比例，就设置padding-top: 56.25%（9÷16=0.5625），同时把容器的height设为0来避免高度叠加：

@media (max-width: 768px) { /* 针对移动端设备 */
  div.masthead-banner.data-bg {
    height: 0;
    padding-top: 56.25%;
    background-size: cover !important;
    background-position: center center !important;
  }
}

如果你的图片是其他比例，比如4:3，就把padding-top改成75%（3÷4=0.75），以此类推。

小提醒 #

• 使用cover时，要确保Banner图片的核心内容（比如logo、关键文字）位于图片中心区域，这样即使边缘被裁剪，核心信息也能完整保留。
• 如果你的网站已经有针对移动端的媒体查询，把上述代码放到对应的媒体查询块里即可，不用重复编写。

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