CSS3 object-fit视频和图片比例自适应
Posted 胖鹅68
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了CSS3 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')
debugger
for(var i = 0; i < videoArr.length; i++ )
const obj = videoArr[i]
obj.play()
function pauseAction ()
const videoArr = document.querySelectorAll('video')
debugger
for(var i = 0; i < videoArr.length; i++ )
const obj = videoArr[i]
obj.pause()
</script>
</html>
以上是关于CSS3 object-fit视频和图片比例自适应的主要内容，如果未能解决你的问题，请参考以下文章