正在加载...

CSS 响应式图片

媒体查询在视口变化时重塑布局。图片是另一压力点：4000px 宽文件在窄列中会溢出、浪费带宽或在加载时让页面跳动。本课讲流式 CSS、预留空间和更聪明的源文件 — 不重复上一课的 @media 语法。

响应式图片工具箱

📊 响应式图片一览

部分 日常作用
max-width: 100% + height: auto 在列内缩小；保持比例
<img> 的 width/height 或 CSS aspect-ratio 预留布局空间；减少 CLS
srcset + sizes 浏览器选接近渲染宽度的文件
<picture> + <source media> 艺术方向 — 不同裁剪或资源
object-fit + 固定框 在已知框内裁剪（Object Fit 课）
布局媒体查询 仍移动列与导航 — 图片跟随 slot 宽度

两层：布局宽度与图片行为。先用 CSS 修溢出；同一视觉在手机上需要更小文件时加 srcset。

流式图片 — max-width 与 height: auto

列内流式图片

css 
.article img {
max-width: 100%;
height: auto;
display: block;
}

避免在巨大 intrinsic 图片上只用 width: 100% 而无 max-width。配合合理源或 srcset。

预留空间 — aspect-ratio

Hero 宽高比

css 
.hero__photo {
width: 100%;
aspect-ratio: 16 / 9;
object-fit: cover;
display: block;
}

需完整显示的内容图用流式 max-width。设计强制固定框时用 aspect-ratio + cover。

分辨率切换 — srcset、sizes

带 sizes 的 srcset

html 
<img
src="photo-800.jpg"
srcset="photo-400.jpg 400w, photo-800.jpg 800w, photo-1200.jpg 1200w"
sizes="(min-width: 48rem) 640px, 100vw"
alt="Team at a whiteboard"
width="800"
height="450"
/>

sizes 要与真实 CSS 渲染宽度一致。

艺术方向 — <picture>

不同裁剪的 picture

html 
<picture>
<source media="(max-width: 40rem)" srcset="hero-portrait.jpg" />
<source media="(min-width: 41rem)" srcset="hero-landscape.jpg" />
<img src="hero-landscape.jpg" alt="City skyline at dusk" width="1200" height="675" />
</picture>

picture 用于艺术方向，不是复制五十个断点。常仅分辨率变化时 srcset 就够。

固定框 — object-fit 提醒

响应式网格卡片缩略图

css 
.card__thumb {
width: 100%;
height: 12rem;
object-fit: cover;
display: block;
}

查询仍改列；图片继承 slot 宽度。断点改变渲染宽度时更新 sizes。

动手试

  1. 宽 <img> — max-width: 100%、height: auto。
  2. Hero 加 aspect-ratio。
  3. 三宽度 srcset + 真实 sizes。
  4. 窄/宽两种裁剪的 <picture>。
  5. 固定高度 thumb + cover。

常见错误

  • 只有巨大 src 无 srcset
  • width: 100% 无 height: auto
  • sizes 与 CSS 不符
  • 无限制盒却用 object-fit
  • 在此重教 @media 而非对齐 slot 与 sizes

小结

  • 流式 CSS 让图片留在响应式列内
  • 尺寸或 aspect-ratio 减少布局跳动
  • srcset/sizes 优化哪个文件；<picture> 做艺术方向
  • object-fit 用于固定框
  • 下一课：Breakpoints — 整页断点策略

🧠 测试您的知识

准备开始

测试您的知识

通过这个互动测验挑战自己，看看你对这个主题的理解程度如何

❓
8
问题
🎯
70%
及格要求
♾️
∞
时间
🔄
∞
尝试次数

📝 说明

  • 仔细阅读每个问题
  • 为每个问题选择最佳答案
  • 您可以随时重新参加测验
  • 您的进度将显示在顶部
主题 56 的 61
Css 教程