首页 > 其他分享 >大屏项目的搭建心得,使用img的填充模式来实现大屏自适应。

大屏项目的搭建心得,使用img的填充模式来实现大屏自适应。

时间:2023-11-30 14:55:20浏览次数:36  
标签:fit img cover 填充 https contain 大屏 心得

借鉴了图片的两种填充模式

cover 和 contain

文档介绍 https://developer.mozilla.org/zh-CN/docs/Web/CSS/object-fit

contain: 被替换的内容将被缩放,以在填充元素的内容框时保持其宽高比。整个对象在填充盒子的同时保留其长宽比。

cover: 被替换的内容在保持其宽高比的同时填充元素的整个内容框。如果对象的宽高比与内容框不相匹配,该对象将被剪裁以适应内容框。

这两种方式结合css transform 属性可以实现交互少的大屏完美展现,可以说能做到和设计图99%吻合。

cover例子 :https://admin.dumogu.top/big-screen/show_1?fit=cover

contain例子:https://admin.dumogu.top/big-screen/show_1?fit=contain

如果有交互性的大屏的话使用transform缩放会有一些事件偏差的问题,所以得配合rem来实现。

cover例子 :https://admin.dumogu.top/big-screen/show_4?fit=cover

contain例子:https://admin.dumogu.top/big-screen/show_4?fit=contain

标签:fit,img,cover,填充,https,contain,大屏,心得
From: https://www.cnblogs.com/dumogu/p/17867351.html

相关文章

  • 摄像头 推流打电视大屏集成 easydarwin 项目备忘
    EasyDarwin直播(推流、拉流)配置好像有点麻烦,不推荐使用开源的。用商用版本的配置简单一点。前后端分离,静态html页面集成大屏接口数据,这样不用安装编程工具,轻量。推流的视频容易断流(稳定性不太乐观)。  winform, wpf还是比较靠谱,集成海康dll,就是开发环境重量,不好现场......
  • 黄庭坚《诸上座帖》临创心得——文档
    1.2研究目的及意义《诸上座帖》是黄庭坚的草书代表作,其所具备的奇崛瑰玮、纵情恣性的特点深受人们的赞赏,同时也是代表着“金戈铁马,气吞万里如虎”的气概,更是完美体现出了草书的精髓,然而该帖在行笔纵情方面的处理也未失法理,因此,作为人们特别关注以及反观的的独特之处[2]。鉴于黄......
  • 学习linux“存储管理”收获与心得
    学习Linux的存储管理是一个非常重要的课题,它涉及到如何有效地管理和利用计算机系统中的存储资源。在学习过程中,我收获了以下几点心得体会:   首先,了解文件系统的概念和原理是非常重要的。文件系统是操作系统用来组织和管理存储设备上的文件和目录的一种机制。在Linux中,常用......
  • 享受视听盛宴,从大屏幕开始
    [作者整理了17份宽屏尺寸的可视化大屏源文件,开箱即用,支持二次开发!有需要可私我发你提取码哈~!] 随着科技的不断发展,宽屏尺寸的可视化大屏已经成为了商务、政府和企业等领域中不可或缺的一部分。这种大屏幕具有高清晰度、高亮度、高色彩还原度和高可视性等优点,能够让人们更加直观......
  • Linux用户管理心得
    Linux系统是多用户、多任务的分时操作系统,系统上每一个进程都有一个特定的文件,每个文件都被一个特定的用户所拥有。创建用户/组首先使用useradd命令创建用户qf01,不指定任何选项,然后使用grep命令过滤出该用户信息删除用户/组如果一个用户需要被删除,可以使用userdel命令,但若想同......
  • 学习linux文件管理的收获与心得
    学习Linux文件管理我有以下收获和心得:1.熟悉了Linux文件系统的组成和目录结构,对Linux操作系统有了更深入的理解。2.掌握了文件和目录操作的基本命令,如ls、cd、mkdir、rm等,能够快速查看和操作文件。3.学习了文件和目录权限相关的命令(chmod,chown,chgrp)以及权限表示方法......
  • 自然资源科普交互大屏助力自然资源的保护
    在当代社会,自然资源的科学管理和可持续利用变得愈发重要。为了提高公众对于自然资源的认知和理解,科普交互大屏成为一个新兴的工具。它通过生动的图像和实时数据展示,以及与观众的互动方式,让人们更深入地了解自然资源和环境保护的重要性。科普交互大屏的设计和应用旨在打破传统科普方......
  • threejs 大屏炫酷3D地图-附源码
    炫酷3D地图效果如下:代码注释非常详细:create(){//添加雾,随着距离线性增大,只能看到一个小是视野范围内的场景,地图缩小很多东西就会看不清//this.scene.fog=newTHREE.Fog(0x191919,30,70)this.getCenterPoint()//计算城市中心点,并将center存储到loca......
  • 进程管理学习心得
    学习Linux进程管理是深入理解系统运行的必经之路。通过掌握命令如ps、top和htop,我能够实时监控系统中运行的进程,了解它们的资源占用情况和运行状态。深入研究kill命令,我学到了如何终止进程,以及使用不同的信号与进程进行交互。这对于处理僵尸进程和优雅地终止程序至关重要。通过......
  • i/o重定向学习心得
    学习LinuxI/O重定向是掌握命令行工具的关键技能之一。通过了解>、>>和<等符号,我学会了将命令的输入和输出重定向到不同的位置。使用>符号,我可以将命令的输出重定向到文件,创建新文件或覆盖已有文件。而>>符号则会将输出追加到文件末尾,保留文件原有内容。了解<符号的用法,我能够从......