x496094471 2022-06-10 20:31 采纳率: 25%
浏览 47
已结题

视频背景 如何去 适应屏幕大小

img

img

img


如何让视频背景适应屏幕不让它有滚动条 不影响观感 谢谢啦 万分感谢有偿

  • 写回答

2条回答 默认 最新

  • 天际的海浪 2022-06-10 20:51
    关注

    video放body中即可,不要放div里
    你题目的解答代码如下：

    <!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
    <title> 页面名称 </title>
<style type="text/css">
.video-bu {
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    z-index: -1;
    object-fit: cover;

}
</style>
</head>
<body>
<video class="video-bu" src="https://www.w3school.com.cn/example/html5/mov_bbb.mp4" controls="controls" autoplay></video><br>

</body>
</html>

    如有帮助，请点击我的回答下方的【采纳该答案】按钮帮忙采纳下，谢谢!

    img

    本回答被题主选为最佳回答 , 对您是否有帮助呢?
    评论 编辑记录
查看更多回答(1条)

报告相同问题？

  • 让LBS输出自动适应屏幕大小的图片的修改方法
    2020-09-30 23:57
    ### LBS输出自动适应屏幕大小的图片的修改方法 #### 背景介绍 随着移动互联网的迅速发展，用户访问网站的方式已经不再局限于单一设备，而是涵盖了多种尺寸、分辨率不同的屏幕，如智能手机、平板电脑、笔记本电脑等...
  • 关于网页背景图怎样自动适应屏幕大小
    2021-12-04 16:20
    zzgo121的博客 有时候写网页想添加一些背景图，但是图的尺寸并不能适应每个屏幕。从而导致一个网页重复多张图。这样很不好看。 解决方法： 使用一个style标签 <style> .background_{ background:url("背景图路径") no-...
  • vue视频背景登录界面.rar
    2020-03-25 09:59
    4. **响应式布局**：为了适应不同设备和屏幕尺寸，登录界面需要具有良好的响应式布局。Vue.js配合CSS框架（如Bootstrap或Element UI）或者使用Flexbox或Grid布局可以轻松实现这一点。 5. **状态管理**：如果登录...
  • Web前端__视频背景
    2018-04-23 00:22
    在移动设备上，确保视频背景适应屏幕尺寸至关重要。可以使用CSS的`object-fit`属性来调整视频填充方式，比如`object-fit: cover`可以让视频填充整个容器，保持纵横比。 4. **性能优化**： 由于视频背景可能会消耗...
  • 《前端》解决背景适配不同屏幕大小，如何解决因屏幕大小的不同而导致背景的放大或缩小。
    2022-11-22 20:49
    Nobody.sir的博客 如何让背景适配铺满不同大小的屏幕，解决因屏幕大小问题引发背景图放大或缩小。
  • 1、前端背景图自适应
    2022-03-05 15:10
    _yummy_的博客 如何实现前端背景图片自适应浏览器窗口大小，只需要添加如下CSS样式既可， background-image: url("../image/bcg.jpg"); background-repeat: no-repeat; background-size: cover; -webkit-background-size: ...
  • 探索前端 CSS3 的背景大小属性
    2025-06-15 23:07
    AI实战架构笔记的博客 传统 CSS 的背景图只能通过控制重复，但无法精准控制大小。CSS3 新增的就是专门解决这个问题的“救星”。本文将覆盖的所有核心取值（如containcover、具体长度/百分比）、计算逻辑、实战技巧和常见问题。本文从“给...
  • 前端领域 HTML5 视频播放的自适应处理
    2025-05-15 17:26
    AI架构全栈开发实战笔记的博客 我们将重点讨论如何使视频内容在不同设备、屏幕尺寸和网络条件下都能提供最佳用户体验。文章首先介绍HTML5视频的基础知识，然后深入探讨自适应处理的各种技术方案，接着提供实际代码示例和优化建议，最后讨论未来...
  • CSS前端开发技术视频2.zip
    2019-06-11 10:21
    8. **响应式设计**：随着移动设备的普及，响应式设计是必不可少的，学习媒体查询来适应不同屏幕尺寸。 9. **浏览器兼容性**：理解各主流浏览器之间的差异，并掌握如何使用前缀和特性检测确保跨浏览器兼容性。 10. ...
  • 2019最新前端6天高薪训练营视频教程
    2021-01-04 10:16
    通过CSS，开发者可以设置文本颜色、背景色、字体大小、布局方式等，使页面更具吸引力。近年来，随着响应式设计的需求增加，Flexbox和Grid布局成为了前端工程师必须掌握的技能之一。 ### JavaScript编程 JavaScript...
  • 没有解决我的问题, 去提问

问题事件

  • 已结题 （查看结题原因） 6月10日
  • 已采纳回答 6月10日
  • 创建了问题 6月10日