使用 CSS 媒体查询在不同屏幕尺寸下切换图片_石家庄创泽智能科技有限公司

新闻中心 NEWS CENTER

您当前位置：首页 > 新闻中心 > 网络学院

使用 CSS 媒体查询在不同屏幕尺寸下切换图片

2025-11-01

浏览次数：次

返回列表

使用 CSS 媒体查询在不同屏幕尺寸下切换图片

本文介绍了如何利用 css 媒体查询，根据屏幕尺寸动态切换网页中显示的图片。通过使用不同的 css 类名和 display 属性，可以轻松实现图片在不同分辨率下的自适应显示，从而提升用户体验。

在响应式网页设计中，经常需要根据不同的屏幕尺寸展示不同的图片，以优化用户体验。例如，在桌面端显示高分辨率图片，而在移动端显示低分辨率图片，可以减少加载时间和流量消耗。CSS 媒体查询提供了一种便捷的方法来实现这一目标。

实现方法

核心思路是：在HTML中放置两张图片，分别赋予不同的CSS类名，然后通过媒体查询控制它们的显示与隐藏。

HTML 结构

首先，在HTML代码中，将两张图片放置在同一个容器内，并分别赋予不同的类名，例如 bigscreen 和 smallscreen：

<div class="right">
  @@##@@
  @@##@@
</div>

image1.png 是用于较大屏幕的图片，image2.png 是用于较小屏幕的图片。

CSS 样式

接下来，在CSS样式表中，初始状态下，让 bigscreen 图片显示，smallscreen 图片隐藏：

Mureka

Mureka是昆仑万维最新推出的一款AI音乐创作工具，输入歌词即可生成完整专属歌曲。

1091 查看详情 Mureka

.bigscreen {
  display: block;
  width: 100%; /* 可选：设置图片宽度 */
  object-fit: contain; /* 可选：设置图片显示方式 */
}

.smallscreen {
  display: none;
  width: 100%; /* 可选：设置图片宽度 */
  object-fit: contain; /* 可选：设置图片显示方式 */
}

然后，使用媒体查询，在特定屏幕尺寸下，切换图片的显示状态。例如，当屏幕宽度小于或等于 800px 时，隐藏 bigscreen 图片，显示 smallscreen 图片：

@media only screen and (max-width: 800px) {
  .bigscreen {
    display: none;
  }
  .smallscreen {
    display: block;
  }
}

完整示例

将以上代码整合在一起，就是一个完整的示例：

<!DOCTYPE html>
<html>
<head>
  <title>Responsive Images</title>
  <style>
    .bigscreen {
      display: block;
      width: 100%;
      object-fit: contain;
    }

    .smallscreen {
      display: none;
      width: 100%;
      object-fit: contain;
    }

    @media only screen and (max-width: 800px) {
      .bigscreen {
        display: none;
      }
      .smallscreen {
        display: block;
      }
    }
  </style>
</head>
<body>
  <div class="right">
    @@##@@
    @@##@@
  </div>
</body>
</html>

注意事项