如何根据屏幕尺寸动态调整背景图片的显示方式

本文介绍如何使用 CSS 媒体查询，针对不同设备屏幕尺寸（尤其是手机端）动态切换背景图片的 background-size 属性值，实现从 cover 到 contain 的响应式适配。

本文介绍如何使用 css 媒体查询，针对不同设备屏幕尺寸（尤其是手机端）动态切换背景图片的 `background-size` 属性值，实现从 `cover` 到 `contain` 的响应式适配。

在构建响应式网页时，背景图片的渲染效果常因设备视口差异而失真：background-size: cover 能确保图片完全填充容器，但可能裁剪关键内容；而 contain 则完整显示整张图片，适合小屏下保留信息完整性。为兼顾大屏视觉冲击与小屏可读性，推荐将内联样式迁移至外部 CSS 类，并结合媒体查询实现精准控制。

首先，定义基础样式类（避免内联样式带来的维护难题）：

.block-img {background-image: url('images/hbc/slider-3.webp');   background-size: cover;   background-repeat: no-repeat;   background-position: center; }

接着，添加移动端适配规则——当视口宽度 ≤ 768px（典型平板 / 手机断点）时，覆盖 background-size 值：

@media (max-width: 768px) {.block-img {     background-size: contain;} }

⚠️ 注意事项：

• 断点选择需匹配实际设计需求 ：768px 是通用阈值，若项目采用移动优先策略，建议改用 @media (max-width: 480px) 或基于设计稿的精确值；
• 确保 HTML 元素正确应用类名 ：

  <div class="block-img" style="height: 400px;"></div>

  （注意：容器需有明确宽高，否则背景图可能不可见）；

• 兼容性无忧 ：@media 查询与 background-size 均被所有现代浏览器及 IE9+ 支持；
• 进阶提示 ：如需更精细控制（如仅在竖屏手机生效），可组合使用 orientation: portrait 或 min-resolution 等媒体特性。

通过该方案，你无需 JavaScript 即可实现轻量、高性能的响应式背景图行为切换，既符合 Web 标准，又显著提升多端用户体验。