一、参考资料

CSS object-fit 属性

二、问题描述

工作中制作一个首页，背景是一个视频文件，由于视频本身的高宽比与显示器的高宽比不匹配，导致首页出现了滚动条。

问题：现在PM 要求首页不能出现滚动条

个人理解：视频的高宽比固定了，不可能改变视频本身的高宽比例，因此是做不到了

同事介绍了CSS3 object-fit 打脸了，原来视频和图片是可以调整高宽比的

三、背景图片、图片、视频调整高宽比

3.1 背景图片自适应

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title>
</head>
<style>.box{height: 100px;width: 200px;margin-top: 20px;background-image: url('./1.png');}
</style>
<body><div>不设置background-size，默认是原始图片大小</div><div class="box" style=""></div><div>cover 此时会保持图像的纵横比并将图像缩放成将完全覆盖背景定位区域的最小大小。</div><div class="box" style="background-size: cover;"></div><div>contain 此时会保持图像的纵横比并将图像缩放成将适合背景定位区域的最大大小。</div><div class="box" style="background-size: contain;"></div><div>percentage 将计算相对于背景定位区域的百分比。第一个值设置宽度，第二个值设置的高度。如果只给出一个值，第二个是设置为"auto(自动)"</div><div class="box" style="background-size: 33% 100%;"></div>
</body>
</html>

3.2 图片自适应

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8" /><meta http-equiv="X-UA-Compatible" content="IE=edge" /><meta name="viewport" content="width=device-width, initial-scale=1.0" /><title>Document</title></head><style>.box {}.box img {height: 100px;width: 300px;margin-top: 20px;}</style><body><div class="box"><div>fill  默认，不保证保持原有的比例，内容拉伸填充整个内容容器。</div><img src="./1.png" /></div><div class="box"><div>fill    默认，不保证保持原有的比例，内容拉伸填充整个内容容器。</div><img src="./1.png" style="object-fit: fill;" /></div><div class="box"><div>contain 保持原有尺寸比例。内容被缩放。</div><img src="./1.png" style="object-fit: contain;" /></div><div class="box"><div>cover 保持原有尺寸比例。但部分内容可能被剪切。</div><img src="./1.png" style="object-fit: cover;" /></div><div class="box"><div>none 保留原有元素内容的长度和宽度，也就是说内容不会被重置。</div><img src="./1.png" style="object-fit: none;" /></div></body>
</html>

3.1 视频自适应

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8" /><meta http-equiv="X-UA-Compatible" content="IE=edge" /><meta name="viewport" content="width=device-width, initial-scale=1.0" /><title>Document</title></head><style>.box {}.box video {height: 100px;width: 300px;}</style><body><div class="box"><div>fill 默认，不保证保持原有的比例，内容拉伸填充整个内容容器。</div><video src="./2.mp4" style="object-fit: fill" preload="auto" loop autoplay controls ></video></div><div class="box"><div>contain 保持原有尺寸比例。内容被缩放。</div><video src="./2.mp4" style="object-fit: contain" preload="auto" loop autoplay controls ></video></div><div class="box"><div>cover 保持原有尺寸比例。但部分内容可能被剪切。</div><video src="./2.mp4" style="object-fit: cover" preload="auto" loop autoplay controls ></video></div><div class="box"><div>none 保留原有元素内容的长度和宽度，也就是说内容不会被重置。</div><video src="./2.mp4" style="object-fit: none" preload="auto" loop autoplay controls ></video></div><div><button onclick="startAction()">播放</button><button onclick="pauseAction()">暂停</button></div></body><script>function startAction () {const videoArr = document.querySelectorAll('video')debuggerfor(var i = 0; i < videoArr.length; i++ ){const obj = videoArr[i]obj.play()}}function pauseAction () {const videoArr = document.querySelectorAll('video')debuggerfor(var i = 0; i < videoArr.length; i++ ){const obj = videoArr[i]obj.pause()}}</script>
</html>

CSS3 object-fit视频和图片比例自适应相关推荐

六边形蜂窝 java,css3实现的六边形蜂窝状图片（自适应）
插件描述:鼠标悬停显示六变形矩阵,蜂窝状图片更新时间:2020-01-02 22:13:12//页面渲染 var str = '' for (var i = 0; i str += ' ' + ' ...
前端图片放大缩小/比例自适应/打码/码大小可调整
需求:图片比例自适应屏幕,放大缩小,马赛克,画笔粗细可调整: 具体实现如下图: 图中可看出马赛克画笔粗细的不同,打码的大小也不同, 第四个按钮是全图重置,点击橡皮按住A/t键和鼠标左键可局部擦除已打码 ...
微信小程序2.9.0基础库canvas2D新API，生成海报保存到手机功能实现，包括文字换行，圆形图片，图片高度自适应等功能封装
WxCanvas 利用canvas微信小程序原生实现的一个绘制微信小程序海报的类,基础库版本>2.9.0. 下面链接中使用的api已被废弃,所以有了本文. 微信小程序生成海报保存到手机先看效果 ...
关于图片按比例自适应缩放
今天在看视觉规范的时候,大高走过来说帮他们那边看一个问题.又是一个关于自适应的问题.不过,我喜欢.瞄了一下,需求是这样的:用户上传照片,照片的尺寸未知:需要生成一个预览,这个预览图要根据提供给用户 ...
小程序图片自适应宽高，保持图片比例不变
小程序图片自适应宽高,保持图片比例不变小程序中,可根据需求给image设置 mode属性来控制图片的裁剪.缩放模式如果要保持图片在容器内不变形可设置mode属性为aspectFit 代码如下: / ...
微信小程序图片按比例自适应显示
小程序的图片默认大小为320px*240px,有时候需求要显示多张图片(每张图片的规格不一致)自适应屏幕的宽,不失真.这时候你第一反应肯定是写:widht:100%;hegiht:auto;很遗憾地告 ...
js css如何按比例放大视频或者图片
因需求需要做个鼠标移动则视频放大,图片放大的功能(不能贴原代码这里就讲述一下思路和重点代码段吧),主要用到的就是一个属性,直接增加一个css的属性如下: transform:scaleX(倍数) sc ...
html的悬停图片缓慢放大,css3怎么实现鼠标悬停图片时缓慢变大效果?（图文+视频）...
本篇文章主要给大家介绍当鼠标滑过图片时实现放大效果的具体方法. 当我们在浏览各大电商网站时,最常见的图片动态效果,应该就是鼠标移入图片即悬停在图片时出现放大的效果了.实现这样的动态效果主要是为了突出产 ...
视频与图片检索中的多模态语义匹配模型 ——原理、启示、应用与展望
前言三多前笔者在<万字长文漫谈视频理解>[1]一文中,曾经将自己对视频理解的认识进行过简单总结,幸而获得了朋友们的认可,能让读者认可是笔者最为骄傲的成就.现在看来文中观点有不少纰漏狭隘之 ...

CSS3 object-fit视频和图片比例自适应

文章目录

一、参考资料

二、问题描述

三、背景图片、图片、视频调整高宽比

3.1 背景图片自适应

3.2 图片自适应

3.1 视频自适应

CSS3 object-fit视频和图片比例自适应相关推荐

最新文章

热门文章