Bootstrap - Object fit

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:

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>

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

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):

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>

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

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