Bootstrap - 对象拟合

本章讨论对象拟合实用程序。这些实用程序类用于调整替换元素的内容大小，例如<img>或<video> 以适合其容器。

object-fit 属性要么保留纵横比，要么拉伸以占用容器中内容的尽可能多的可用空间。

该属性的格式为.object-fit-{value}。以下是.object-fit类占用的值：

包含- 整个内容将按比例缩小或放大以适合容器，同时保持其原始宽高比。
cover - 内容将缩放以覆盖整个容器，可能会裁剪其中的一部分。纵横比将保持不变。
填充- 这是默认值。图像或视频将填充整个容器，可能会拉伸或压缩其原始纵横比。
缩放（用于缩小）- 内容将缩小以适合容器，但前提是使用包含值放大内容。否则，它的Behave就像没有。
none - 这不会给内容的显示带来任何变化。

让我们看一个.object-fit: none的例子：

例子

您可以使用“编辑并运行”选项编辑并尝试运行此代码。

<!DOCTYPE html>
<html>
  <head>
    <title>Bootstrap - Object fit</title>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha3/dist/css/bootstrap.min.css" rel="stylesheet">
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha3/dist/js/bootstrap.bundle.min.js"></script>
    <style>
      img {
        width:200px;
        height:400px;
        }
      </style>
  </head>
  <body>
    <div class="container mt-3">
     <h4>Object fit value - none</h4>
     <img src="/bootstrap/images/tutimg.png" width="667" height="184" class="object-fit-none">
    </div>
  </body>
</html>

让我们看另一个值object-fit: contains的示例：

例子

您可以使用“编辑并运行”选项编辑并尝试运行此代码。

<!DOCTYPE html>
<html>
  <head>
    <title>Bootstrap - Object fit</title>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha3/dist/css/bootstrap.min.css" rel="stylesheet">
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha3/dist/js/bootstrap.bundle.min.js"></script>
    <style>
      img {
        width:200px;
        height:400px;
        }
      </style>
  </head>
  <body>
    <div class="container mt-3">
     <h4>Object fit value - contain</h4>
     <img src="/bootstrap/images/tutimg.png" width="667" height="184" class="object-fit-contain">
    </div>
  </body>
</html>

反应灵敏

实用程序类.object-fit包括各种断点的响应变体，例如sm、md、lg、xl、xxl，使用格式.object-fit-{breakpoint}-{value}。

让我们看一个断点（md）的例子：

例子

您可以使用“编辑并运行”选项编辑并尝试运行此代码。

<!DOCTYPE html>
<html>
  <head>
    <title>Bootstrap - Object fit</title>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha3/dist/css/bootstrap.min.css" rel="stylesheet">
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha3/dist/js/bootstrap.bundle.min.js"></script>
    <style>
      img {
        width:200px;
        height:400px;
       }
      </style>
  </head>
  <body>
    <div class="container mt-3">
     <h4>Object fit value (contain) - breakpoint (md)</h4>
     <img src="/bootstrap/images/tutimg.png" width="667" height="184" class="object-fit-md-contain">
    </div>
  </body>
</html>

让我们看一个断点 (xxl) 的示例：

例子

您可以使用“编辑并运行”选项编辑并尝试运行此代码。

<!DOCTYPE html>
<html>
  <head>
    <title>Bootstrap - Object fit</title>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha3/dist/css/bootstrap.min.css" rel="stylesheet">
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha3/dist/js/bootstrap.bundle.min.js"></script>
    <style>
      img {
        width:200px;
        height:400px;
       }
      </style>
  </head>
  <body>
    <div class="container mt-3">
     <h4>Object fit value (fill) - breakpoint (xxl)</h4>
     <img src="/bootstrap/images/tutimg.png" width="667" height="184" class="object-fit-xxl-fill">
    </div>
  </body>
</html>

视频

.object -fit实用程序类也适用于<video>元素。

让我们看一个例子：

例子

您可以使用“编辑并运行”选项编辑并尝试运行此代码。

<!DOCTYPE html>
<html>
  <head>
    <title>Bootstrap - Object fit</title>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha3/dist/css/bootstrap.min.css" rel="stylesheet">
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha3/dist/js/bootstrap.bundle.min.js"></script>
    <style>
      video {
      border: 5px groove darkblue;
      padding: 30px;
      width: auto;
      height: auto;
      }
    </style>
  </head>
  <body>
    <div class="container mt-3">
     <h4>Object fit value (cover) - video</h4>
     <video src="/bootstrap/images/foo.mp4" class="object-fit-cover" autoplay>
     </video>
     </div>
  </body>
</html>