我使用this script将视频放置在我的主页上。
问题是,当您在浏览器窗口上以全角和高度在50%上进行查看时,它不会填满整个窗口。
$(element).each(function(){
var videoAspectRatio = $(this).data('height')/$(this).data('width'),
windowAspectRatio = windowHeight/windowWidth;
if (videoAspectRatio > windowAspectRatio) {
videoWidth = windowWidth;
videoHeight = videoWidth * videoAspectRatio;
$(this).css({'top' : -(videoHeight - windowHeight) / 2 + 'px', 'margin-left' : 0});
} else {
videoHeight = windowHeight;
videoWidth = videoHeight / videoAspectRatio;
$(this).css({'margin-top' : 0, 'margin-left' : -(videoWidth - windowWidth) / 2 + 'px'});
}
有趣的是,它以另一种方式起作用(宽度设置为屏幕的30%,全高)
我确定它在保持尺寸,我想不出如何更改它。
Live preview here
最佳答案
您可以通过设置如下样式来保持比例:
width: 100%;
height: auto;