可调整大小的视频不完全适合父 div

Question

我有一个可拖动且可调整大小的视频元素。我希望视频元素在调整大小时能够 100% 适合父 div，但这是我未能做到的地方。这是我到目前为止所拥有的：CSS.my-div{    width: 320px;    height: 240px;    top: 200px;    left: 400px;    position:absolute;    z-index: 9;    background-color: #28a745;}  JSlet video_div =  document.createElement('div');video_div.id = 'video-div'$(video_div).addClass('my-div')$("body").append(($(video_div).draggable().resizable()))let video_element;video_element = document.createElement('video');$(video_element).attr('id', 'my_video');$(video_element).attr('class', 'video-js vjs-default-skin');$(video_element).attr('width', '100%');$(video_element).attr('height', '100%');$(video_element).attr('controls', ' ');$(video_element).attr('preload', 'auto');$(video_element).attr('data-setup', '{}');let source = document.createElement('source');$(source).attr('type', "video/mp4");$(source).attr('src', "http://grochtdreis.de/fuer-jsfiddle/video/sintel_trailer-480.mp4");$(video_div).append(video_element)$(video_element).append(source);如果您尝试调整视频大小，它不适合父 div（绿色背景出现在后面）我该如何修改我的代码来实现这一目标？

Answer 1

默认情况下，视频标签尝试保持视频宽高比。如果你想填充你的parent，你必须使用CSS属性“object-fit”

在您的代码中，尝试添加

video_element.style.objectFit = "fill";

或者，使用 JQuery：

$(video_element).css("object-fit", "fill");

当然，这样做并不能保证视频的完美宽高比。

Answer 2

将 % 添加到周围名为 .my-div 的 div 的高度（在该视频中它是 56.25%）。如果更改宽度，高度始终为高度的 56.25%，并且视频应该适合。