Bootstrap - 物件適應

本章討論物件適應實用工具。這些實用工具類用於調整替換元素（例如<img>或<video>）的內容大小以適應其容器。

object-fit 屬性可以保持縱橫比，也可以拉伸以佔據容器中儘可能多的可用空間。

此屬性的格式為.object-fit-{value}。以下是.object-fit類採用的值

contain - 整個內容將按比例縮小或放大以適應容器，同時保持其原始縱橫比。
cover - 內容將按比例縮放以覆蓋整個容器，可能會裁剪部分內容。縱橫比將保持不變。
fill - 這是預設值。影像或影片將填充整個容器，可能會拉伸或壓縮其原始縱橫比。
scale (用於縮小) - 內容將縮小以適應容器，但前提是使用 contain 值時會放大。否則，其行為與 none 相同。
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: contain

示例

您可以使用編輯和執行選項編輯並嘗試執行此程式碼。

<!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>

列印頁面