弹性图片与媒体

在自适应设计中，图片与视频等媒体元素也必须能够根据不同设备的屏幕尺寸自动调整大小，避免出现超出容器、模糊、加载过慢等问题，这就是弹性媒体（Flexible Media）的核心目标。

弹性图片的处理

设置最大宽度

最常见的方式是设置 max-width 为 100%，这样图片在容器变小时会自动缩放，但不会放大超过原始尺寸。

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

使用 picture 标签提供不同尺寸

针对不同设备加载不同大小的图片，提高加载效率。

<picture>
  <source media="(max-width: 768px)" srcset="image-small.jpg" />
  <source media="(min-width: 769px)" srcset="image-large.jpg" />
  <img src="image-default.jpg" alt="描述文本" />
</picture>

使用 srcset 和 sizes

允许浏览器根据屏幕密度或宽度自动选择最合适的图片。

<img
  src="image-default.jpg"
  srcset="image-small.jpg 600w, image-large.jpg 1200w"
  sizes="(max-width: 600px) 100vw, 50vw"
  alt="描述文本"
/>

弹性视频的处理

让视频响应容器宽度

可通过设置外层容器的宽高比实现视频自适应：

<div class="video-wrapper">
  <iframe
    src="https://www.youtube.com/embed/xxxx"
    frameborder="0"
    allowfullscreen
  ></iframe>
</div>

.video-wrapper {
  position: relative;
  padding-top: 56.25%; /* 16:9 比例 */
  height: 0;
  overflow: hidden;
}

.video-wrapper iframe {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

注意事项

• 图片资源尽量压缩并使用现代格式（如 WebP、AVIF）
• 小图片可考虑用 CSS background-image 或 SVG
• 音视频资源应开启懒加载（lazyload）以优化首屏性能