bootstrap
  1. bootstrap-object-fit
PreviousNext

Bootstrap Object Fit

Bootstrap Object Fit is a CSS property that allows you to control the size and position of an image or video within a container.

Syntax

To use Bootstrap Object Fit, you can add the following class to your image or video tag:

.object-fit-{value}

The {value} can be one of the following:

  • fill: The image or video will fill the container, ignoring its aspect ratio.
  • contain: The image or video will fit inside the container, maintaining its aspect ratio.
  • cover: The image or video will cover the container, maintaining its aspect ratio.
  • none: The image or video will not be resized.

Example

Here is an example of how to use Bootstrap Object Fit.

<div class="container">
  <img src="https://static.additionalsheet.com/images//others/lucy.jpg" alt="Image" class="img-fluid object-fit-cover">
</div>
Try Playground

In this example, the image will cover its container, maintaining its aspect ratio.

Explanation

In the code above, we used the img-fluid class to make the image responsive and the object-fit-cover class to make the image cover its container. The container class is used to create a container with a fixed width to hold the image.

Use

Bootstrap Object Fit can be used to control the size and position of images and videos within their containers. It is useful when you want to maintain the aspect ratio of an image or video while fitting it inside a container.

Important Points

  • Bootstrap Object Fit is a CSS property that allows you to control the size and position of an image or video within a container.
  • The {value} for Bootstrap Object Fit can be one of fill, contain, cover, or none.
  • Bootstrap Object Fit is useful when you want to maintain the aspect ratio of an image or video while fitting it inside a container.

Summary

Bootstrap Object Fit is a useful tool for controlling the size and position of images and videos within their containers. By using Bootstrap Object Fit, you can maintain the aspect ratio of your media while fitting it inside a container, making your website more visually appealing and user-friendly.

OpacityOverview
Published on: