HTML: HTML 响应式图片
同一张图片在手机、平板电脑和台式电脑上应能以不同的尺寸和分辨率显示——这就是"响应式图片"。了解如何使图片清晰、带宽高效且加载速度快，从而适用于所有屏幕尺寸。
1. 视口（Viewport）设置
响应式设计的第一步是设置视口 viewport。没有它，移动浏览器会把页面缩小到 980px 宽度来显示，导致文字和图片变得很小。加上这行 <meta> 标签，页面宽度就会匹配置设备屏幕：
▶ 示例
HTML
<!-- ✅ 有 viewport 设置（推荐） -->
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<style>
body { margin: 0; font-family: sans-serif; }
.box { padding: 20px; background: #e3f2fd; }
</style>
</head>
<body>
<div class="box">
<h1>你好，移动端！</h1>
<p>在手机上查看时，文字大小合适，一屏显示完整内容。</p>
</div>
</body>
<!-- ❌ 没有 viewport 设置 -->
<head>
<style>
body { margin: 0; font-family: sans-serif; }
.box { padding: 20px; background: #ffebee; }
</style>
</head>
<body>
<div class="box">
<h1>你好，移动端！</h1>
<p>在手机上查看时，页面被缩小到 980px，文字很小。</p>
</div>
</body>
2. 图片自适应
让图片自动适应容器宽度，最常用的两个 CSS 属性：
max-width: 100%— 图片不超过容器宽度，但不会拉伸超过原始尺寸width: 100%— 图片始终铺满容器宽度，可能被拉伸变形
▶ 示例
HTML
<!DOCTYPE html>
<html>
<head>
<style>
body { font-family: sans-serif; padding: 20px; }
.container {
width: 80%;
max-width: 600px;
border: 2px dashed #999;
padding: 10px;
margin-bottom: 20px;
}
.img-max {
max-width: 100%;
height: auto;
}
.img-full {
width: 100%;
height: auto;
}
</style>
</head>
<body>
<h2>max-width: 100%（保持比例，不拉伸）</h2>
<div class="container">
<img src="/assets/images/tutorials/html-example-photo.webp" alt="示例图片" class="img-max">
<p>图片原始宽度 800px，容器 600px，图片缩小到 600px 且不变形。</p>
</div>
<h2>width: 100%（铺满容器）</h2>
<div class="container">
<img src="/assets/images/tutorials/html-example-photo.webp" alt="示例图片" class="img-full">
<p>图片始终填满容器宽度。加上 height: auto 防止变形。</p>
</div>
</body>
</html>
📌 图片加载速度很重要。 用 CSS 缩小大图只是"看起来小了"，实际仍要下载原图的大文件。建议先裁剪好合适尺寸的图片再上传——移动端用小图、桌面端用大图，可以大幅提升加载速度。
3. srcset 属性
srcset 让浏览器根据屏幕密度（1x、2x、3x）或视口宽度自动选择最合适的图片。你只需提供多个图片版本，浏览器会"智能选择"：
▶ 示例
HTML
<!-- 根据屏幕密度选择 -->
<img src="photo-1x.jpg"
srcset="photo-1x.jpg 1x, photo-2x.jpg 2x, photo-3x.jpg 3x"
alt="示例照片">
<!-- 根据视口宽度选择 + sizes 描述图片显示宽度 -->
<img src="small.jpg"
srcset="small.jpg 480w,
medium.jpg 768w,
large.jpg 1200w"
sizes="(max-width: 480px) 100vw,
(max-width: 768px) 80vw,
60vw"
alt="响应式图片示例">
srcset 的常用写法有两种：
- x 描述符：根据屏幕密度选择。普通屏用 1x，Retina 屏用 2x 或 3x。
- w 描述符：根据视口宽度选择。配合
sizes属性告诉浏览器图片实际显示的宽度，浏览器计算出最佳图片。
4. <picture> 标签
<picture> 比 srcset 更灵活，它允许你在不同屏幕宽度下加载完全不同的图片——比如宽屏上显示全景图，窄屏上显示裁剪后的局部特写（这在设计上称为"艺术指导"）：
▶ 示例
HTML
<picture>
<!-- 宽屏 >= 1200px：显示全景图 -->
<source media="(min-width: 1200px)" srcset="landscape-full.jpg">
<!-- 中屏 >= 768px：显示中等视角 -->
<source media="(min-width: 768px)" srcset="landscape-medium.jpg">
<!-- 小屏 < 768px：显示特写裁剪版 -->
<source media="(max-width: 767px)" srcset="landscape-cropped.jpg">
<!-- 兜底：浏览器不支持的 picture 时显示 -->
<img src="landscape-medium.jpg" alt="风景照片">
</picture>
<picture> 也常用于提供多种图片格式（如 WebP），浏览器会选择第一个支持的格式：
▶ 示例
HTML
<picture>
<source srcset="photo.avif" type="image/avif">
<source srcset="photo.webp" type="image/webp">
<img src="photo.jpg" alt="照片">
</picture>
浏览器从上到下依次检查 <source>，如果支持该格式就加载，都不支持则降级到 <img>。这样既享受了新格式的压缩优势，又保证了兼容性。
❓ 常见问题
Q
srcset和sizes有什么区别？A
srcset提供多个图片源及它们的分辨率（如480w、768w），sizes告诉浏览器在不同视口宽度下图片的实际显示尺寸（如(max-width: 480px) 100vw）。浏览器根据这两个信息计算出需要加载哪个图片。简单说：srcset是"有哪些图可选"，sizes是"在什么情况下用多大的图"。Q 为什么不用JavaScript判断屏幕大小来切换图片？
A 用
srcset+sizes的好处：1）浏览器在解析HTML时就能决定加载哪张图，不需要等JavaScript执行；2）在JavaScript禁用时仍能工作；3）浏览器可以更智能地选择（考虑网络状况、设备像素比等）。JavaScript方案只适合复杂的艺术指导场景（如不同构图），简单分辨率切换用srcset就够了。Q
<picture>和srcset什么时候用哪个？A
srcset用于"同一张图片的不同分辨率版本"——浏览器自动选择最合适的清晰度；<picture>用于"不同场景下显示不同的图片"——可以是不同构图（艺术指导）或不同格式（WebP/AVIF/JPG）。简单判断：只是清晰度不同用srcset，构图或格式不同用<picture>。Q 响应式图片会影响SEO吗？
A 正确使用响应式图片对SEO有正面影响：1）提升页面加载速度（Core Web Vitals指标）；2）改善移动端用户体验；3）搜索引擎可以索引
alt文本。注意：srcset中的图片必须是同一内容的不同版本，不要用完全不同的图片，否则可能被搜索引擎视为欺骗。📖 小节
<meta name="viewport">是移动端适配的第一步max-width: 100%让图片自适应且不变形srcset根据屏幕密度或视口宽度加载不同分辨率的图片<picture>+<source>在不同屏幕宽度下显示不同构图的图片，或提供多种图片格式- 始终用
<img>作为<picture>的兜底
📝 作业
- 响应式图片相册：创建包含 3 张图片的相册页，每张图片用
max-width: 100%保证在手机上完整显示。用srcset为每张图片提供 1x 和 2x 两个版本。 - 艺术指导实践：用
<picture>实现：桌面端显示一张 1200px 宽的风景图，平板显示 768px 的裁剪版，手机显示 480px 的特写版。分别用min-width媒体查询控制断点。
