怎么使用HTML5中Video标签的Object-fit属性控制视频在容器内的填充方式-H5教程-PHP中文网

object-fit 是作用于 video 元素的 css 属性，需配合显式宽高使用；常用值包括 fill（拉伸变形）、contain（等比留黑边）、cover（等比裁剪填充，最常用）、none（原始尺寸）和 scale-down（兜底缩放）；配合 object-position 可调整裁剪区域，现代浏览器广泛支持，ie 不支持。

怎么使用html5中video标签的object-fit属性控制视频在容器内的填充方式

object-fit 是 CSS 属性，不是 HTML5 <video></video> 标签的原生属性，但它能直接作用于 <video></video> 元素，控制视频内容如何适应其容器尺寸。

object-fit 的常用值及效果

给 <video></video> 设置宽高（如通过 CSS 指定 width/height），再配合 object-fit，就能精准控制填充行为：

object-fit: fill — 拉伸填充整个容器，不保持宽高比，可能变形
object-fit: contain — 完整显示视频，等比缩放，留黑边（类似“适应窗口”）
object-fit: cover — 等比缩放并填满容器，超出部分裁剪（最常用，类似背景图 background-size: cover）
object-fit: none — 不缩放，按原始尺寸显示，可能溢出或留空
object-fit: scale-down — 在 none 和 contain 中取更小的尺寸，适合响应式兜底

基础用法示例

HTML 结构：

CSS 控制：

使用HTML,CSS,JavaScript开发Android应用程序英文文字pdf版附源文件

如果你了解HTML，CSS和JavaScript，您已经拥有所需的工具开发Android应用程序。本动手本书展示了如何使用这些开源web标准设计和建造，可适应任何Android设备的应用程序 - 无需使用Java。您将学习如何创建一个在您选择的平台的Android友好的网络应用程序，然后转换与自由PhoneGap框架到一个原生的Android应用程序。了解为什么设备无关的移动应用是未来的潮流，并开始构建应用程序，提供更

下载

.video-container {
  width: 640px;
  height: 360px;
}
.video-container video {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

注意：必须显式设置 width 和 height（或使用 aspect-ratio），否则 object-fit 无实际作用。