处理灵活媒体的概览

当您采用响应式网页设计路线时，部分交易内容是流体网格。 也就是说，容器元素以百分比宽度设置。 举个例子：一个包含博客文章的<article> 元素在小屏幕设备上可能宽 320px，而在大屏幕上可能宽 690px。 文本可以调整大小，并且会流畅地填充容器。 这并不难。 但是媒体——图片、视频播放器和音频播放器——需要更多关注（例如，一个从屏幕边缘伸出的视频==不好）。 本文旨在总结处理这些媒体的方法。

灵活的图片

如果您习惯于 IE 7 及更高版本的支持。 这种小巧美妙的功能就足够了。

img {
  max-width: 100%;

  /* just in case, to force correct aspect ratio */
  height: auto !important;
}

如果您关心 IE 7 支持（我希望不是，但我理解有些情况下您必须这样做），请使用此方法确保图像在缩小后能完好无损。

img { 
  -ms-interpolation-mode: bicubic; 
}

此处查看更多相关内容。

如果您需要关心 IE 6（再次...）Ethan Marcotte 的这篇文章提供了一个 JavaScript 解决方案。 对于一个已经很慢的浏览器来说，加载额外的 JavaScript 有点令人沮丧，但是 c’est la vie。

思维转变

曾经，调整图片大小是一件禁忌。 浏览器在调整图片大小方面很糟糕，而且带宽被浪费了。 现在这种态度已经消失殆尽，主要是因为浏览器现在在调整图片大小并使其看起来不错的方面做得很好。 事实上，随着“视网膜”显示变得流行，为容器提供过大的图片反而是一种好事，因为缩小它们可以使它们看起来更清晰。

然而，带宽问题仍然是一个（重大）问题。 这就是为什么响应式图片现在如此热门的原因。 关键是：在考虑灵活图片时，也要考虑响应式图片。 您可以在此处了解更多关于 当前解决方案。

灵活的视频

灵活的视频比图片稍微复杂一些。 如果您直接使用 HTML5 <video>，好消息是它保持着与图片相同的纵横比，因此相同的技巧也适用。

video {
  max-width: 100%;

  /* just in case, to force correct aspect ratio */
  height: auto !important;
}

但是，我开始认为直接使用 HTML5 <video> 并不是一个好主意。 这些年来，所需的格式一直在不断变化，而且还没有结束。 再加上以下事实：1）托管视频会占用大量带宽，而且价格昂贵；2）流媒体是另一个完全复杂的领域；3）在不同格式、设备和可用带宽下维护适当的质量很难；4）在播放器上制作一致的皮肤控制也很难……嗯……直接使用 HTML5 视频太麻烦了。

相反，我强烈建议使用像 YouTube 或 Vimeo 这样的视频服务。 当您从这些服务中嵌入视频时，您会嵌入一个<iframe>。 iframe 内的内容可能是 HTML5 视频，但您不必直接处理它。

所有这些都说明：<iframe> 存在纵横比问题。

Thierry Koblentz 多年前在他的 A List Apart 文章 Creating Intrinsic Ratios for Video 中解决了这个问题。

基本思想是，您创建一个高度为零、顶部填充以百分比设置的视频包装器 div。 该百分比实际上将是宽度的百分比，使其保持纵横比。 然后，您将视频绝对定位在内部，这为您提供了保持纵横比的难以捉摸的能力。 我们将针对 iframe 进行绝对定位，因为正如前面提到的，视频不需要这样做，但 iframe 需要。 基本知识

.video-wrapper {
  height: 0;
  padding-bottom: 56.25%; /* 16:9 */
  position: relative;
}
.video-wrapper iframe {
  position: absolute;
  top: 0; left: 0; right: 0; bottom: 0;
}

请查看 该文章，了解更多关于旧版浏览器支持的细微差别和细节。 我还在我的 .net mag 文章 Create Fluid Width Videos 中涵盖了所有这些内容，并包含了一些自制的 JavaScript 解决方案（带有演示）。

复杂性足够了，让我们简单点

如果您使用 jQuery 并且厌倦了围绕灵活宽度视频问题所带来的复杂性，我建议您尝试 FitVids.js。 我与 Dave Rupert 共同编写了这个 jQuery 插件，专门用于解决这个问题。 它使用了与上面解释的完全相同的概念，只是它会自动执行。 这意味着 1）在您编写的标记中没有非语义包装器；2）纵横比与单个视频匹配（并非所有视频都相同）。

FitVids.js 可以开箱即用，适用于所有主要的视频播放器，并且可以非常轻松地扩展以支持任何播放器。

使用 Sublime Video？

我有一篇教程，介绍如何使他们的播放器具有灵活宽度。

使用 MediaElements.js？

MediaElements.js 是一个非常棒的 HTML5 视频播放器，它减轻了我前面提到的 HTML5 视频的一些问题。 具体来说，它提供了一个漂亮的一致播放器皮肤，并能够回退到旧技术来播放视频，例如 Flash 和 Silverlight。 它不是万能药，因为它无法解决移动平台上的平台之争（这些平台通常没有 Flash 或 Silverlight），也不能帮助解决流媒体或质量问题，但它仍然很好。

MediaElements.js 中有很多固定像素计算内容，但我过去已经能够通过一些 !important 覆盖来强制它具有灵活宽度。

.mejs-container {
  width: 100% !important;
  height: auto !important;
  padding-top: 57%;
}
.mejs-overlay, .mejs-poster {
  width: 100% !important;
  height: 100% !important;
}
.mejs-mediaelement video {
  position: absolute;
  top: 0; left: 0; right: 0; bottom: 0;
  width: 100% !important;
  height: 100% !important;
}

响应式视频？

还记得响应式图片是一个热门话题，因为我们试图负责任地不提供不必要的大图片吗？ 视频也存在同样的问题，只是它被...嗯...整个视频中的帧数（可能很多）所加剧。

一个半生不熟的解决方案是根据浏览器窗口宽度提供不同的视频源。 我有一篇关于此的教程。

另一个解决方案是在视频源上使用媒体属性，并希望支持变得更好，并且它不会被删除。

<video controls> 
   <source src="video-small.mp4" type="video/mp4" media="all and (max-width: 480px)"> 
   <source src="video-small.webm" type="video/webm" media="all and (max-width: 480px)"> 
   <source src="video.mp4" type="video/mp4"> 
   <source src="video.webm" type="video/webm"> 
</video>

最好的解决方案是使用视频服务，让他们为您处理。

灵活的音频

您只能“看到” HTML5 音频，前提是您在元素上专门使用 controls 属性。

<audio controls src="audio.ogg">
  <p>Fallback.</p>
</audio>

好消息是，您只需将 width: 100%；添加到这个家伙，它就会变得灵活。

audio {
  width: 100%;
}

WebKit 浏览器出于某种原因将它们的宽度限制为 800px。 但是播放器仍然保持在该空间内居中。 Opera 和 Firefox 没有这种最大宽度。 它们都具有略微不同的播放器，但基本上都执行相同的操作（播放声音并具有播放和暂停按钮等）。

目前另一个非常流行的嵌入式声音播放器是 SoundCloud 播放器，它默认情况下具有灵活宽度（团队万岁！）。