草庐IT

CSS3及Javascript实现网页视频背景居中并自动拉伸

yuanhangovo 2024-03-28 原文

最近笔者在写一个个人主页时碰到了一个问题，就是希望用视频作背景但不能实现随窗口大小自动拉伸并居中，经过学习研究，笔者最后总结了两种方法实现，分别是css3的新属性和JavaScript实现。

CSS3

首先声明一下追求的效果：视频居中，并且尽可能使视频更多内容能显示。

容器（div） > 视频（video）
容器css设置为

    height: 100%;
    width: 100%;
    overflow: hidden;
    position: relative;

CSS3新增了object-fit属性，属性值有：fill、contain、cover等，三者是否能满足要求？可以和笔者一起测试一下。（笔者用的视频宽高为1080*1920）

视频css若是设置为：

.video_box{
	position: absolute;
	//设置居中显示
	left: 50%;
    top: 50%;
    transform: translate(-50%,-50%); 
    
    object-fit: fill; //contain和cover其实是一样的效果
}

因为视频宽高太大所以直接以原比例居中填充了容器，使得一部分内容被裁剪了，很明显不满足要求。那么我们给视频加上宽高的限制。

.video_box > video{
	position: absolute;
	left: 50%;
    top: 50%;
    transform: translate(-50%,-50%); 
    height: 100%;
    width: 100%;
    object-fit: fill; 
}

这里注意宽高限制都要加上，若是少一个效果将会偏向满足另一个。此时很明显有问题，视频会被拉伸来适应容器大小，使得视频显示失去比例，fill不符合我们的需求。
若是使用contain，则将会尽可能满足高度与容器相同而宽度按原比例，也不满足要求。
而cover则能很好的满足我们的要求。

.video_box > video{
	position: absolute;
	left: 50%;
    top: 50%;
    transform: translate(-50%,-50%); 
    height: 100%;
    width: 100%;
    object-fit: cover; 
}

Javascript

其实分析要求后的大概意思就是，尽量满足视频宽或高中至少一项符合容器宽或高，另一项必须按原比例拉伸至至少充满容器。那么可以写出以下JS代码：

        window.addEventListener('resize',function() {
            var h = window.innerHeight;
            var w = window.innerWidth;
            var bg = document.querySelector('.video_box video');
            if(w / h > 1920 / 1080) { //1920*1080为视频宽高比
                bg.className = 'v_w';
            } else {
                bg.className = 'v_h';
            }
        })

css设置为

.v_w{
    width: 100%;
    /* height: 100%; */
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%,-50%);
    display: block;
}
.v_h{
    /* width: 100%; */
    height: 100%;
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%,-50%);
    display: block;
}

思路为，若是宽高比过大则满足宽度适配容器，如果宽高比过小就满足高度适配容器。
但还有一点小问题，在首次加载并且在页面大小改变前js都不会执行，所以再加上一个onload（‘load’）事件使第一次打开页面后也能应用宽高设置。完整js代码为:

		window.onload = function() {
            var h = window.innerHeight;
            var w = window.innerWidth;
            var bg = document.querySelector('.bg video');
            if(w / h > 1920 / 1080) {
                bg.className = 'v_w';
            } else {
                bg.className = 'v_h';
            }
        }
        window.addEventListener('resize',function() {
            var h = window.innerHeight;
            var w = window.innerWidth;
            var bg = document.querySelector('.bg video');
            if(w / h > 1920 / 1080) {
                bg.className = 'v_w';
            } else {
                bg.className = 'v_h';
            }
        })

js代码为笔者拙见，若有更好的实现方法欢迎多与笔者交流！

JavascriptCSS3spanclasstoken音视频html

有关CSS3及Javascript实现网页视频背景居中并自动拉伸的更多相关文章

  1. ruby-on-rails - 使用 Ruby on Rails 进行自动化测试 - 最佳实践 - 2

    很好奇，就使用ruby​​onrails自动化单元测试而言，你们正在做什么？您是否创建了一个脚本来在cron中运行rake作业并将结果邮寄给您？git中的预提交Hook？只是手动调用？我完全理解测试，但想知道在错误发生之前捕获错误的最佳实践是什么。让我们理所当然地认为测试本身是完美无缺的，并且可以正常工作。下一步是什么以确保他们在正确的时间将可能有害的结果传达给您？ 最佳答案 不确定您到底想听什么，但是有几个级别的自动代码库控制:在处理某项功能时，您可以使用类似autotest的内容获得关于哪些有效，哪些无效的即时反馈。要确保您的提

  2. ruby - capybara field.has_css?匹配器 - 2

    我在MiniTest::Spec和Capybara中使用以下规范:find_field('Email').must_have_css('[autofocus]')检查名为“电子邮件”的字段是否具有autofocus属性。doc说如下:has_css?(path,options={})ChecksifagivenCSSselectorisonthepageorcurrentnode.据我了解，字段“Email”是一个节点，因此调用must_have_css绝对有效!我做错了什么？ 最佳答案 通过JonasNicklas得到了答案:No

  3. ruby-on-rails - 使用 Sublime Text 3 突出显示 HTML 背景语法中的 ERB？ - 2

    所以我在关注Railscast，我注意到在html.erb文件中，ruby代码有一个微弱的背景高亮效果，以区别于其他代码HTML文档。我知道Ryan使用TextMate。我正在使用SublimeText3。我怎样才能达到同样的效果？谢谢! 最佳答案 为SublimeText安装ERB包。假设您安装了SublimeText包管理器*，只需点击cmd+shift+P即可获得命令菜单，然后键入installpackage并选择PackageControl:InstallPackage获取包管理器菜单。在该菜单中，键入ERB并在看到包时选择

  4. ruby - RuntimeError(自动加载常量 Apps 多线程时检测到循环依赖 - 2

    我收到这个错误:RuntimeError(自动加载常量Apps时检测到循环依赖当我使用多线程时。下面是我的代码。为什么会这样？我尝试多线程的原因是因为我正在编写一个HTML抓取应用程序。对Nokogiri::HTML(open())的调用是一个同步阻塞调用，需要1秒才能返回，我有100,000多个页面要访问，所以我试图运行多个线程来解决这个问题。有更好的方法吗？classToolsController0)app.website=array.join(',')putsapp.websiteelseapp.website="NONE"endapp.saveapps=Apps.order("

  5. ruby - 如何根据特征实现 FactoryGirl 的条件行为 - 2

    我有一个用户工厂。我希望默认情况下确认用户。但是鉴于unconfirmed特征，我不希望它们被确认。虽然我有一个基于实现细节而不是抽象的工作实现，但我想知道如何正确地做到这一点。factory:userdoafter(:create)do|user,evaluator|#unwantedimplementationdetailshereunlessFactoryGirl.factories[:user].defined_traits.map(&:name).include?(:unconfirmed)user.confirm!endendtrait:unconfirmeddoenden

  6. ruby-on-rails - 使用 Rmagick 或 ImageMagick 在背景上放置标题 - 2

    我有一张背景图片，我想在其中添加一个文本框。我想弄清楚如何将标题放置在其顶部的正确位置。(我使用标题是因为我需要自动换行功能)。现在，我只能让文本显示在左上角，但我需要能够手动定位它的开始位置。require'RMagick'require'Pry'includeMagicktext="Loremipsumdolorsitamet"img=ImageList.new('template001.jpg')img 最佳答案 这是使用convert的ImageMagick命令行的答案。如果你想在Rmagick中使用这个方法，你必须自己移植

  7. css - 用 watir 检查标签类？ - 2

    我有一个div，它根据表单是否正确提交而改变。我想知道是否可以检查类的特定元素？开始元素看起来像这样。如果输入不正确，添加错误类。 最佳答案 试试这个:browser.div(:id=>"myerrortest").class_name更多信息:http://watir.github.com/watir-webdriver/doc/Watir/HTMLElement.html#class_name-instance_method另一种选择是只查看具有您期望的类的div是否存在browser.div((:id=>"myerrortes

  8. 华为OD机试用Python实现 -【明明的随机数】 2023Q1A - 2

    华为OD机试题本篇题目：明明的随机数题目输入描述输出描述：示例1输入输出说明代码编写思路最近更新的博客华为od2023|什么是华为od，od薪资待遇，od机试题清单华为OD机试真题大全，用Python解华为机试题|机试宝典【华为OD机试】全流程解析+经验分享,题型分享,防作弊指南华为o

  9. 基于C#实现简易绘图工具【100010177】 - 2

    C#实现简易绘图工具一.引言实验目的:通过制作窗体应用程序(C#画图软件),熟悉基本的窗体设计过程以及控件设计,事件处理等,熟悉使用C#的winform窗体进行绘图的基本步骤,对于面向对象编程有更加深刻的体会.Tutorial任务设计一个具有基本功能的画图软件**·包括简单的新建文件,保存,重新绘图等功能**·实现一些基本图形的绘制,包括铅笔和基本形状等,学习橡皮工具的创建**·设计一个合理舒适的UI界面**注明:你可能需要先了解一些关于winform窗体应用程序绘图的基本知识,以及关于GDI+类和结构的知识二.实验环境Windows系统下的visualstudio2017C#窗体应用程序三.

  10. ruby-on-rails - 从应用程序中自定义文件夹内的命名空间自动加载 - 2

    我们目前正在为ROR3.2开发自定义cms引擎。在这个过程中，我们希望成为我们的rails应用程序中的一等公民的几个类类型起源，这意味着它们应该驻留在应用程序的app文件夹下，它是插件。目前我们有以下类型:数据源数据类型查看我在app文件夹下创建了多个目录来保存这些:应用/数据源应用/数据类型应用/View更多类型将随之而来，我有点担心应用程序文件夹被这么多目录污染。因此，我想将它们移动到一个子目录/模块中，该子目录/模块包含cms定义的所有类型。所有类都应位于MyCms命名空间内，目录布局应如下所示:应用程序/my_cms/data_source应用程序/my_cms/data_ty

随机推荐