如何根据屏幕尺寸修改图片属性？实现手机端背景尺寸切换

DevOps 小满

2026-7-11

解决方案：移动端切换背景图片尺寸为contain

内联样式无法直接结合媒体查询实现响应式修改，推荐将样式提取到CSS中，通过媒体查询针对移动端覆盖属性：

步骤1：给目标元素添加类名

修改你的HTML，给元素加上唯一类名方便定位：

<div class="slider-bg" style="background-image: url('images/hbc/slider-3.webp');"></div>

步骤2：添加CSS样式（可放于`<style>`标签或外部CSS文件）

/* 全局默认样式，适配桌面端 */
.slider-bg {
  background-size: cover;
  /* 可选：添加背景定位和重复控制，确保显示效果 */
  background-position: center;
  background-repeat: no-repeat;
}

/* 移动端媒体查询，这里以768px为分界，可根据需求调整 */
@media (max-width: 768px) {
  .slider-bg {
    background-size: contain;
  }
}

如果不想修改HTML结构，也可以尝试内联媒体查询（兼容性略差，不推荐）：

<div style="
  background-image: url('images/hbc/slider-3.webp');
  background-size: cover;
  @media (max-width: 768px) { background-size: contain; }
"></div>