HTML,img,video无法铺满屏幕解决方法，同视频做网页背景无法全屏的解决方法

最新推荐文章于 2024-03-12 19:16:55 发布
最新推荐文章于 2024-03-12 19:16:55 发布
阅读量2.8w 收藏 20
点赞数 9
分类专栏： HTML+CSS3 文章标签： CSS3 html
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_36370731/article/details/78907284
版权
 

我在这里用视频做为网页背景，给视频设了100%宽高，在firebug也显示video的宽高和页面是一样的，但是效果却没出来，视频没有铺满屏幕。下面是我的代码（原代码，错误的） 
<style>
    *{margin: 0;padding: 0}
    html,body{width: 100%;height: 100%}
    video{
        width: 100%;height: 100%;
    }
</style>
<div  style="width: 100%;height: 100%">
    <!--<div class="col-lg-12 col-md-12 col-xs-12 col-sm-12"style="width: 100%;height: 100%">-->
    <video id="fullVideo" class="" muted="muted" autoplay="autoplay" loop="loop"
           src="public/webm/v_002.webm"></video>
        <!--</div>-->
</div>

出现这个问题的原因是在页面自适应过程中缩放比例没处理好

解决方法就是在CSS样式中加上“ object-fit:fill ” 样式

关于这个属性呢，我发现有两篇文章介绍的很好，我在这里把链接贴出来，一看就懂：










做一个有知识的流氓
关注
  • 9
    点赞
  • 踩
  • 20
    收藏
    觉得还不错? 一键收藏
  • 7
    评论
专栏目录
HTML5 video标签的poster图片如何填充整个标签区域
这是个真的技术博客
08-23 3万+
利用div块的背景图片实现<video>标签poster属性图片不能平铺问题。
uniapp web-view 网页 video播放器 全屏后无法横屏解决办法
Li_Tao00的博客
12-24 7007
uni-app的web-view组件中视频如何实现横屏播放？
背景图片随屏幕大小变化问题的解决方法
12-13
今天的工作进度有点慢，我发现最主要的原因是html标签的属性的作用不熟悉。 特别是，在做页面背景图片可随浏览器窗口大小调整时，我的基础知识运用不熟练的缺点就表现出来了。 例如:今天下午做的页面背景时，由于图片过大，直接引用时，导致屏幕无法显示完全。 实际解决它的方法很简单： 复制代码代码如下: <style type=”text/css”> .bgimage{ position:fixed;z-index:-1;//这两句时最重要的，前 //句使图片始终显示在当前页，后一句是使图片显示在最底层。 } .bgimage img{heiht:100%;width:100%;} </style>
HTML中 video标签样式铺满全屏
最新发布
qq_63608386的博客
03-12 1585
video标签默认不是铺满的，即使手动设置宽高100%也不会生效，所以当需要video铺满div时，需要加上一个css样式stylewidth100%;height100%;
当视频文件video比列不符合盒子大小，需要充满盒子时解决方案。
CHENC0518的博客
10-27 3354
当视频文件video比列不符合盒子大小，需要充满盒子时解决方案。
video标签，不撑满盒子，上方留白问题
weixin_43907110的博客
06-01 1520
scale-down 保持原有尺寸比例。内容的尺寸与 none 或 contain 中的一个相同，取决于它们两个之间谁得到的对象尺寸会更小一些。您可以通过使用 object-position 属性来切换被替换元素的内容对象在元素框内的对齐方式。bject-fit 属性指定元素的内容应该如何去适应指定容器的高度与宽度。fill 默认，不保证保持原有的比例，内容拉伸填充整个内容容器。none 保留原有元素内容的长度和宽度，也就是说内容不会被重置。inherit 从该元素的父元素继承属性。
html video poster属性图片铺满video标签
Zola的博客
10-14 4108
poster属性图片铺满video video{ width: 100%; object-fit:fill; } html5的video的背景图片poster铺满全屏大小方法  html5支持视频播放，而且趋势，facebook也全面切换到html5了，最近做一个简单的视频播放器，测试了好多jplayer，video.js之类的都觉得不太好，所以自己写一个最简单的，不过发现了一个问题，视频播放之前的封面不太好…… 封面的尺寸被强制缩小了，需要填充整个播放器的。 < !DOCTYPE html>
移动端关于video标签视频全屏播放的兼容适配问题
linxner的博客
02-15 9029
之前做一个项目，需要在两个大屏之间加一屏的视频，效果类似三屏竖方向的翻页，只是中间是一个视频，本以为如此简单三两下搞定。没想到。。。 原因在于，IOS与Android对video标签的支持不同，在IOS运行的好好的，放到Android中就各种问题。 一般video标签长这样： <video id="start_video" class="start_v...
html5的video的背景图片poster铺满全屏大小方法.docx
10-26
这种方法充分利用了CSS的灵活性，解决了HTML5视频海报图片无法自适应全屏的问题。需要注意的是，由于不同的浏览器可能对某些CSS属性支持不同，因此在编写CSS时通常需要包含各种浏览器的前缀，如`-webkit-`、`-moz-`...
html5视频媒体标签video的使用方法及完整参数说明详解
12-14
video是HTML5的一个视频媒体标签，其作用是在网页中嵌入指定的视频，video标签的代码结构及参数如下。 HTML代码结构： <video controls autoplay loop preload="auto" poster="img/popup-img.png" webkit-...
img 标签下多余空白的解决方法
12-10
即，设置img为“display:block;”。在本例中添加一组CSS代码：“#sub img {display:block;}”。 2、设置图片的垂直对齐方式 即设置图片的vertical-align属性为“top，text-top，bottom，text-bottom”也可以解决。...
仅img元素创建后不添加到文档中会执行onload事件的解决方法
12-10
[removed] var img = document.createElement(‘img’); img.src = “http://huoche.7234.cn/images/jb51/xbqm5wr11fj.jpg”; img.onload = function(){alert(this.width);}; [removed] </BODY>
img标签保持纵横比html,无论容器如何，使img增长到最大宽度/高度并保持纵横比...
weixin_39757169的博客
07-01 1451
将图像的最大宽度设置为100％ . 高度应设置为自动 .Solution 1 ：当图像长到其父div的宽度时：.wrapper {width: 500px;height: 500px;border: 1px solid red;position: absolute;}.wrapper img {/*width:100%;*/height: auto;max-width: 100%;} Solut...
video标签播放视频，视频宽高和播放器宽高不一致处理方法
11-01 6141
我们官网首屏的无限循环动画视频，需要不管video标签多宽多高，里面的视频都能覆盖满整个video标签，这时候用到了css3的一个属性：object-fit object-fit CSS 属性指定可替换元素的内容应该如何适应到其使用的高度和宽度确定的框。 可以通过使用 object-position 属性来切换被替换元素的内容对象在元素框内的对齐方式。 取值： contain 被替换的内容将被缩放...
<video>全屏状态下视频没有铺满屏幕
weixin_30627341的博客
08-13 1656
在使用videojs初始定宽高或者给<video>写定宽高后，在全屏状态下会导致视频在左上角展开，保持着之前写定的宽高，而没有实现真正全屏。 如果通过JS在点击全屏按钮后改变video的宽高，需要查阅videojs文档，实现方式比较复杂（原因还是太菜）。 其实通过CSS实现全屏是最方便的，只需要在video外部套一个<div class="videoWrap"&gt...
H5 video安卓默认点击不能全屏播放解决办法
weixin_34050389的博客
06-26 2984
调用方法： autoFullScrenn(obj)   还有一篇： 使用MediaElement.js构建个性的HTML5音频和视频播放器   var fullscreen = function(elem) { var prefix = 'webkit'; if ( elem[prefix + 'EnterFullScreen'] ) { ...
web前端：视频背景（铺满整个网页）
weixin_55439495的博客
03-10 3217
1：效果图： 其中每行相片都是来回滚动，背景为视频 2：代码如下： <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>带背景音乐的电子相册</title> <style type="text/css"> body { width:100%; height:100%; .
html网页背景图片铺满
08-29
要让HTML网页背景图片铺满，可以使用以下方法： 1. 在CSS中使用背景图片属性设置背景图像，并将其应用于DIV元素： ```html <style> div { background-image: url('background.jpg'); background-repeat: no-repeat; background-size: cover; } </style> ``` 2. 可以直接在body标签中设置背景图片，并使用CSS来调整背景图片的样式： ```html <style> body { background-image: url('background.jpg'); background-repeat: no-repeat; background-size: 100%; } </style> ``` 3. 可以直接在img标签中设置背景图片，并使用CSS来调整背景图片的样式： ```html <img src="background.jpg" style="width: 100%; height: 100%;" /> ``` 以上是几种常见的方法，可以根据具体需求选择适合的方式来实现HTML网页背景图片铺满。<span class="em">1</span><span class="em">2</span><span class="em">3</span> #### 引用[.reference_title] - *1* *3* [HTML+CSS实现背景图片铺满页面的方法](https://blog.csdn.net/zxh996/article/details/117849182)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v93^chatsearchT3_2"}}] [.reference_item style="max-width: 50%"] - *2* [一天1个小技巧——html的背景图片如何平铺整个页面？](https://blog.csdn.net/weixin_53000915/article/details/113038593)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v93^chatsearchT3_2"}}] [.reference_item style="max-width: 50%"] [ .reference_list ]

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 7
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值