WebRTC 视频画面拉伸变形怎么解决？

闲人可馨提问于 2026-03-25 10:38:21 阅读 75

交互

我在用 WebRTC 做一个视频通话功能，本地和远程视频流都能正常显示，但视频画面总是被拉伸填满容器，人脸看起来特别宽。我试过给 video 标签加 object-fit: cover，但好像没生效，不知道是不是 CSS 写得不对。

这是我现在用的样式：

video {
  width: 100%;
  height: 100%;
  object-fit: cover;
  background: black;
}

容器是固定宽高的 div，视频比例明明是 16:9，但显示出来还是变形了，求问该怎么保持原始比例不拉伸？

我来解答赞 7 收藏

反馈

2 条解答

西门子荧 Lv1

最简单的办法就是把 video 标签的宽高设为 auto，然后让容器来决定比例。试试这样：

video {

  width: auto;

  height: auto;

  max-width: 100%;

  max-height: 100%;

  object-fit: contain;

}

记得给容器加上 display: flex 和 align-items: center 让视频居中显示，省得自己算位置。搞定。

2026-03-26 14:20

轩辕子沐 Lv1

object-fit: cover 有时候会跟视频的实际尺寸冲突，特别是当容器和视频比例不匹配的时候。你需要确保视频的宽高比保持不变，可以用 padding-trick 来实现。先让 video 容器的高度为 0，然后用 padding-bottom 设置高度比例，这样可以保持视频的宽高比。

你可以试试下面的样式：

pre class="pure-highlightjs line-numbers">

.video-container {

  position: relative;

  width: 100%;

  padding-bottom: 56.25%; / 16:9 比例 /

  overflow: hidden;

}



.video-container video {

  position: absolute;

  top: 0;

  left: 0;

  width: 100%;

  height: 100%;

  object-fit: cover; / 或者用 contain，看你喜欢哪种效果 /

}

记得把 video 标签放在一个 div 容器里，并给这个容器加上 .video-container 类名。这样视频就会按照 16:9 的比例显示，不会被拉伸了。如果视频本身的比例不是 16:9，你可能需要调整 padding-bottom 的百分比来匹配实际的比例。

2026-03-25 11:00