html5的picture标签怎么用，html4响应式图片怎么做

在网页适配不同尺寸设备的过程中，响应式图片是提升用户体验的重要环节。html5推出的picture标签专门用于处理响应式图片场景，而html4时代没有对应的原生标签，需要通过其他方案实现类似效果。

html5的picture标签使用方法

picture标签是html5新增的容器标签，用于为不同设备条件提供多张图片资源，浏览器会根据预设的规则自动选择最合适的图片加载。它的核心结构包含<picture>、<source>和<img>三个部分。

基本语法结构

picture标签内部可以放置多个<source>元素和一个<img>元素，<source>用于定义不同条件下的图片资源，<img>作为兜底资源，当所有source条件都不匹配时加载。

<picture>
  <!-- 当屏幕宽度大于等于1200px时加载大图 -->
  <source srcset="large.jpg" media="(min-width: 1200px)">
  <!-- 当屏幕宽度大于等于768px时加载中图 -->
  <source srcset="medium.jpg" media="(min-width: 768px)">
  <!-- 兜底小图，所有条件不匹配时加载 -->
  <img src="small.jpg" alt="响应式图片示例">
</picture>

source元素的核心属性

source元素有两个常用属性，用于定义图片资源和匹配条件：

• srcset：指定图片资源的路径，可以是一个路径，也可以是多个路径配合尺寸描述，比如srcset="small.jpg 400w, medium.jpg 800w"，其中400w表示图片宽度为400像素。
• media：指定媒体查询条件，和CSS中的媒体查询语法一致，用于匹配设备的屏幕宽度、分辨率等特征。
• type：可选属性，指定图片的MIME类型，比如type="image/webp"，浏览器不支持该类型时会跳过这个source。

完整使用示例

下面是一个适配不同屏幕宽度和图片格式的完整例子：

<picture>
  <!-- 优先加载webp格式的大图，适配宽屏设备 -->
  <source srcset="banner-1200.webp" media="(min-width: 1200px)" type="image/webp">
  <!-- 宽屏设备不支持webp时加载jpg大图 -->
  <source srcset="banner-1200.jpg" media="(min-width: 1200px)">
  <!-- 平板设备加载中尺寸webp图 -->
  <source srcset="banner-800.webp" media="(min-width: 768px)" type="image/webp">
  <!-- 平板设备不支持webp时加载jpg中图 -->
  <source srcset="banner-800.jpg" media="(min-width: 768px)">
  <!-- 兜底移动端小图 -->
  <img src="banner-400.jpg" alt="网站横幅">
</picture>

html4响应式图片实现方案

html4没有原生的picture标签，要实现响应式图片需要借助CSS或者JavaScript方案，常用的有两种方式。

CSS背景图方案

通过CSS的媒体查询，为不同屏幕宽度设置不同的背景图片，这种方式适合装饰性的图片，不适合需要被搜索引擎抓取的content图片。

/* 默认小屏幕加载小图 */
.responsive-img {
  width: 100%;
  height: 200px;
  background-image: url("small.jpg");
  background-size: cover;
  background-position: center;
}

/* 屏幕宽度大于等于768px时加载中图 */
@media (min-width: 768px) {
  .responsive-img {
    height: 300px;
    background-image: url("medium.jpg");
  }
}

/* 屏幕宽度大于等于1200px时加载大图 */
@media (min-width: 1200px) {
  .responsive-img {
    height: 400px;
    background-image: url("large.jpg");
  }
}

对应的html4结构只需要一个容器元素：

<div class="responsive-img"></div>

JavaScript动态切换方案

通过JavaScript监听窗口尺寸变化，动态修改<img>标签的src属性，实现响应式图片效果，这种方式适合需要作为内容图片的场景。

// 获取图片元素
var imgElement = document.getElementById("responsive-img");

// 定义不同尺寸对应的图片路径
var imgMap = {
  small: "small.jpg",
  medium: "medium.jpg",
  large: "large.jpg"
};

// 切换图片的函数
function changeImg() {
  var screenWidth = window.innerWidth;
  if (screenWidth >= 1200) {
    imgElement.src = imgMap.large;
  } else if (screenWidth >= 768) {
    imgElement.src = imgMap.medium;
  } else {
    imgElement.src = imgMap.small;
  }
}

// 初始加载时执行一次
changeImg();

// 窗口尺寸变化时重新执行
window.onresize = changeImg;

对应的html4结构：

<img id="responsive-img" alt="响应式图片">

两种方案的对比

我们可以通过下表对比html5 picture标签和html4实现方案的差异：

如果项目不需要兼容旧版浏览器，优先使用html5的picture标签实现响应式图片，开发效率更高且体验更好。如果需要兼容html4环境或者旧版IE浏览器，可以选择CSS背景图或者JavaScript动态切换的方案。

picture标签响应式图片html5html4修改时间：2026-07-04 07:18:29