Bootstrap 简明教程
Bootstrap - Object fit
本章讨论对象适应实用程序。这些实用程序类用于调整替换元素的内容大小，例如 <img> 或 <video> 以适应其容器。
This chapter discusses about the object fit utilities. These utility classes are used to resize the content of the replaced elements, such as <img> or <video> to fit its container.
object-fit 属性可以保留纵横比，也可以伸展以占据容器中内容的尽可能多的空间。
The object-fit property either preserves the aspect ratio or stretches to take up as much as space available of the content in the container.
此属性的格式为 .object-fit-{value} 。以下是 .object-fit 类采用的值：
The format of this property is .object-fit-{value}. Following are the values that .object-fit class takes up:
-
contain - The entire content will be scaled down or up to fit within the container, while maintaining its original aspect ratio.
-
cover - The content will be scaled to cover the entire container, potentially cropping parts of it. The aspect ratio will be maintained.
-
fill - This is the default value. The image or video will fill the entire container, possibly stretching or squishing its original aspect ratio.
-
scale (for scale down) - The content will be scaled down to fit within the container, but only if it would be scaled up by using the contain value. Otherwise, it behaves as none.
-
none - This does not bring any change in the display of the content.
我们来看 .object-fit: none 的一个示例：
Let us see an example for .object-fit: none:
Example
你可以编辑并尝试运行此代码，使用 编辑和运行 选项。
You can edit and try running this code using the *Edit & Run *option.
<!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 的示例：
Let us see an example for another value object-fit: contain:
Example
你可以编辑并尝试运行此代码，使用 编辑和运行 选项。
You can edit and try running this code using the *Edit & Run *option.
<!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>Responsive
实用程序类 .object-fit 包括针对各种断点（例如 sm, md, lg, xl, xxl ）的自适应变化，格式为 .object-fit-{breakpoint}-{value} 。
The utility class .object-fit includes responsive variations for various breakpoints, such as sm, md, lg, xl, xxl, using the format .object-fit-{breakpoint}-{value}.
我们来看断点 (md) 的示例：
Let us see an example for breakpoint (md):
Example
你可以编辑并尝试运行此代码，使用 编辑和运行 选项。
You can edit and try running this code using the *Edit & Run *option.
<!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) 的示例：
Let us see an example for breakpoint (xxl):
Example
你可以编辑并尝试运行此代码，使用 编辑和运行 选项。
You can edit and try running this code using the *Edit & Run *option.
<!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>Video
.object-fit 实用程序类还可以用于 <video> 元素。
The .object-fit utility classes also work on <video> elements.
我们看一个示例：
Let us see an example:
Example
你可以编辑并尝试运行此代码，使用 编辑和运行 选项。
You can edit and try running this code using the *Edit & Run *option.
<!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>