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.
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.
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.
Let us see an example for .object-fit: none:https://www.tutorialspoint.com/bootstrap/examples/object_fit_none.php
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/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet"><script src="https://cdn.jsdelivr.net/npm/[email protected]/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></pre>Let us see an example for another value object-fit: contain:https://www.tutorialspoint.com/bootstrap/examples/object_fit_contain.php
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/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet"><script src="https://cdn.jsdelivr.net/npm/[email protected]/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></pre>Responsive
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}.
Let us see an example for breakpoint (md):https://www.tutorialspoint.com/bootstrap/examples/object_fit_responsive_md.php
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/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet"><script src="https://cdn.jsdelivr.net/npm/[email protected]/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></pre>Let us see an example for breakpoint (xxl):https://www.tutorialspoint.com/bootstrap/examples/object_fit_responsive_xxl.php
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/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet"><script src="https://cdn.jsdelivr.net/npm/[email protected]/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></pre>Video
The .object-fit utility classes also work on <video> elements.
Let us see an example:https://www.tutorialspoint.com/bootstrap/examples/object_fit_video.php
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/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet"><script src="https://cdn.jsdelivr.net/npm/[email protected]/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></pre>
Leave a Reply