使用 CSS 媒体查询在不同屏幕尺寸下切换图片-html教程-PHP中文网

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

花韻仙語

发布： 2025-11-01 12:20:27

原创

352人浏览过

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

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

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

实现方法

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

HTML 结构

立即学习“前端免费学习笔记（深入）”；

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

<div class="right">
  <img alt="" class="bigscreen" src="image1.png" />
  <img alt="" class="smallscreen" src="image2.png" />
</div>

登录后复制

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

CSS 样式

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

360智图

AI驱动的图片版权查询平台

查看详情

.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">
    <img alt="" class="bigscreen" src="image1.png" />
    <img alt="" class="smallscreen" src="image2.png" />
  </div>
</body>
</html>

登录后复制

注意事项