CSS3 object-fit视频和图片比例自适应-Toy模板网

这篇具有很好参考价值的文章主要介绍了CSS3 object-fit视频和图片比例自适应。希望对大家有所帮助。如果存在错误或未考虑完全的地方，请大家不吝赐教，您也可以点击"举报违法"按钮提交疑问。

一、参考资料

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>

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

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>

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 {
    }
    .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>