图片与视频的自适应处理

在响应式设计中，处理图片和视频的自适应性是确保页面内容在不同设备上良好显示的关键部分。图片和视频的尺寸应根据视口大小自动调整，以避免内容溢出或失真，同时保持高效的加载性能。

图片自适应处理

1. 使用 max-width 和 height: auto

为了让图片在各种屏幕尺寸下自适应调整，可以使用 max-width: 100% 和 height: auto 属性。这会确保图片的宽度不会超过其父容器的宽度，同时保持其纵横比。

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

2. 响应式图片（使用 srcset 和 sizes）

对于高分辨率显示屏（如 Retina 屏幕），可以使用 HTML 的 srcset 属性来提供多个图片来源，浏览器会根据设备的分辨率选择最合适的图片资源，从而提升加载性能并确保图像质量。

<img
  src="image-1x.jpg"
  srcset="image-2x.jpg 2x, image-3x.jpg 3x"
  alt="Example Image"
/>

此外，sizes 属性可以结合 srcset 来定义图片在不同视口宽度下的展示尺寸。

<img
  src="image-1x.jpg"
  srcset="image-2x.jpg 2x, image-3x.jpg 3x"
  sizes="(max-width: 600px) 100vw, 50vw"
  alt="Responsive Image"
/>

3. 图片懒加载

为了提高页面加载性能，可以使用懒加载技术延迟加载图片，直到它们进入视口。这有助于减少初始加载时的资源消耗，并提高页面的加载速度。

<img src="image.jpg" loading="lazy" alt="Lazy Loaded Image" />

4. 使用 CSS 背景图像

如果需要将图片作为背景展示，可以通过 background-size 属性来确保背景图像自适应。

.container {
  background-image: url("background.jpg");
  background-size: cover; /* 使背景图像覆盖整个容器 */
  background-position: center; /* 将背景居中 */
  background-repeat: no-repeat; /* 防止背景重复 */
}

视频自适应处理

1. 使用 max-width 和 height: auto

视频元素可以像图片一样通过 max-width: 100% 和 height: auto 来确保其尺寸适应父容器的宽度，同时保持正确的纵横比。

video {
  max-width: 100%;
  height: auto;
}

2. 使用 object-fit 属性

为了确保视频以特定方式填充容器，object-fit 属性可以用来控制视频的适应方式。cover 值将保持纵横比并填充整个容器，可能会裁剪部分视频；而 contain 将确保视频完全适应容器，但可能会有空白区域。

video {
  object-fit: cover; /* 视频填充整个容器，可能裁剪 */
  width: 100%;
  height: 100%;
}

3. 响应式视频容器（通过 padding-bottom 技巧）

为了让视频在响应式布局中维持正确的纵横比，通常使用一种“填充法”来创建响应式视频容器。通过设置 padding-bottom，可以保持视频的纵横比不变。

.video-container {
  position: relative;
  width: 100%;
  padding-bottom: 56.25%; /* 16:9 比例 */
}

.video-container iframe,
.video-container object,
.video-container embed {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

4. 使用 HTML5 <video> 标签的 poster 属性

poster 属性允许在视频加载之前显示一张静态图片作为占位符。这样，在视频尚未加载或加载中时，用户仍然可以看到一个预览图像。

<video controls poster="thumbnail.jpg">
  <source src="video.mp4" type="video/mp4" />
  Your browser does not support the video tag.
</video>

5. 使用 autoplay 和 muted 属性

对于某些自适应视频内容（如背景视频），可以使用 autoplay 和 muted 属性来控制视频自动播放而不带声音，这有助于改善用户体验并减少干扰。

<video autoplay muted loop>
  <source src="background-video.mp4" type="video/mp4" />
  Your browser does not support the video tag.
</video>

总结

处理图片和视频的自适应是现代网页设计中至关重要的部分。通过使用响应式图片技术、调整视频大小和使用适当的 CSS 属性，可以确保网页内容在不同设备上自适应显示，同时提升加载性能和用户体验。