Bootstrap - Object Fit
Bootstrap Classes for Object-Fit
Bootstrap has classes that you can use to apply the object-fit property to your images. These classes are:
| Class | Description |
|---|---|
.object-fit-fill |
Applies the object-fit: fill property to the image, which stretches or squishes the image to fit the container. |
.object-fit-contain |
Applies the object-fit: contain property to the image, which resizes the image to fit within the container while keeping its aspect ratio. |
.object-fit-cover |
Applies the object-fit: cover property to the image, which resizes the image to cover the entire container while keeping its aspect ratio. |
.object-fit-none |
Applies the object-fit: none property to the image, which shows the image at its original size without any resizing or cropping. |
.object-fit-scale-down |
Applies the object-fit: scale-down property to the image, which resizes the image to fit within the container while keeping its aspect ratio. |
Example
<img src="image.jpg" class="object-fit-cover" alt="Object-Fit Cover Example">By using these Bootstrap classes, you can control how your images are shown within their containers without having to write custom CSS.
Responsive Object-Fit
Bootstrap lets you change the object-fit behavior of an image based on the screen size. This helps when you want to show different parts of an image or change how it fits within its container at different breakpoints.
To change the object-fit property based on screen size, you can use Bootstrap's responsive classes. These classes follow the format object-fit-{breakpoint}-{value}, where {breakpoint} is the screen size (e.g., sm, md, lg, xl) and {value} is the object-fit value (e.g., fill, contain, cover, none, scale-down).
Here are the responsive object-fit classes in Bootstrap:
.object-fit-{breakpoint}-fill.object-fit-{breakpoint}-contain.object-fit-{breakpoint}-cover.object-fit-{breakpoint}-none.object-fit-{breakpoint}-scale-down
Example
<img src="image.jpg" class="object-fit-sm-cover object-fit-md-contain" alt="Responsive Object-Fit Example">You can combine multiple responsive object-fit classes to change the behavior at different breakpoints. This lets you control how your images are shown within their containers across various screen sizes.
Object-Fit with Background Images
The object-fit property is used with the <img> element, but it can also be applied to background images. When working with background images, you can use the object-fit property to control how the image fits within its container.
To apply object-fit to a background image, set the background-image property on an element and then use the object-fit property to specify how the image should be sized and positioned.
Bootstrap provides utility classes for applying object-fit to background images. These classes follow the format bg-object-fit-{value}, where {value} is the desired object-fit value.
Here are the Bootstrap classes for background image object-fit:
| Class | Description |
|---|---|
.bg-object-fit-fill |
Applies object-fit: fill to the background image, stretching or squishing it to fill the container. |
.bg-object-fit-contain |
Applies object-fit: contain to the background image, resizing it to fit within the container while maintaining its aspect ratio. |
.bg-object-fit-cover |
Applies object-fit: cover to the background image, resizing it to cover the entire container while maintaining its aspect ratio. |
.bg-object-fit-none |
Applies object-fit: none to the background image, showing it at its original size without any resizing or cropping. |
.bg-object-fit-scale-down |
Applies object-fit: scale-down to the background image, resizing it to fit within the container while maintaining its aspect ratio. |
Background Image Object-Fit Example
<div class="bg-image bg-object-fit-cover" style="background-image: url('image.jpg'); height: 300px;"></div>By using these Bootstrap classes, you can control how background images are displayed within their containers, similar to how you would with the <img> element.
Object-Position
The object-position property is used with the object-fit property to specify how an image or video should be positioned within its container. object-fit determines how the media is resized to fit the container, while object-position lets you control the placement of the media within the container.
The object-position property takes two values: the horizontal position and the vertical position. These values can be specified using keywords (left, center, right, top, bottom) or percentages.
Bootstrap has utility classes for setting the object-position property. These classes follow the format object-position-{value}, where {value} is the desired position.
Here are the Bootstrap classes for object-position:
| Class | Description |
|---|---|
.object-position-top |
Puts the image or video at the top of the container. |
.object-position-bottom |
Puts the image or video at the bottom of the container. |
.object-position-left |
Puts the image or video on the left side of the container. |
.object-position-right |
Puts the image or video on the right side of the container. |
.object-position-center |
Puts the image or video at the center of the container horizontally and vertically. |
Object-Position Example
<img src="image.jpg" class="object-fit-none object-position-top" alt="Object-Position Top Example">You can combine object-position classes with object-fit classes to get the desired positioning and sizing of your images or videos within their containers.
By using the object-position property and Bootstrap's utility classes, you have more control over how your media is displayed, letting you create visually appealing and well-positioned content.