亚洲在线久爱草,狠狠天天香蕉网,天天搞日日干久草,伊人亚洲日本欧美

為了賬號安全,請及時綁定郵箱和手機立即綁定
已解決430363個問題,去搜搜看,總會有你想問的

可調整大小的視頻不完全適合父 div

可調整大小的視頻不完全適合父 div

茅侃侃 2023-07-20 10:37:47
我有一個可拖動且可調整大小的視頻元素。我希望視頻元素在調整大小時能夠 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(綠色背景出現在后面)我該如何修改我的代碼來實現這一目標?
查看完整描述

1 回答

?
慕斯709654

TA貢獻1840條經驗 獲得超5個贊

默認情況下,視頻標簽嘗試保持視頻寬高比。如果你想填充你的parent,你必須使用CSS屬性“object-fit”

在您的代碼中,嘗試添加

video_element.style.objectFit?=?"fill";

或者,使用 JQuery:

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

當然,這樣做并不能保證視頻的完美寬高比。

查看完整回答
反對 回復 2023-07-20
?
慕的地6264312

TA貢獻1817條經驗 獲得超6個贊

將 % 添加到周圍名為 .my-div 的 div 的高度(在該視頻中它是 56.25%)。如果更改寬度,高度始終為高度的 56.25%,并且視頻應該適合。

查看完整回答
反對 回復 2023-07-20
  • 1 回答
  • 0 關注
  • 140 瀏覽
慕課專欄
更多

添加回答

舉報

0/150
提交
取消
微信客服

購課補貼
聯系客服咨詢優惠詳情

幫助反饋 APP下載

慕課網APP
您的移動學習伙伴

公眾號

掃描二維碼
關注慕課網微信公眾號