mirror of
https://github.com/twbs/bootstrap.git
synced 2025-08-27 07:14:36 +02:00
Add new .overflow-x, .overflow-y, and object-fit utilities
Overflow utilities are self-explanatory. The object-fit property is used to specify how an `<img>` or `<video>` should be resized to fit its container. Offers a responsive alternative to using `background-image` for a resizable fill/fit image.
This commit is contained in:
Daniel O
Mark Otto
62
site/content/docs/5.2/utilities/object-fit.md
Normal file
62
site/content/docs/5.2/utilities/object-fit.md
Normal file
@@ -0,0 +1,62 @@
|
||||
---
|
||||
layout: docs
|
||||
title: Object fit
|
||||
description: Use the object fit utilities to sets how the content of a [replaced element](https://developer.mozilla.org/en-US/docs/Web/CSS/Replaced_element), such as an `<img>` or `<video>`, should be resized to fit its container.
|
||||
group: utilities
|
||||
toc: true
|
||||
---
|
||||
|
||||
## How it works
|
||||
|
||||
Change the value of the [`object-fit` property](https://developer.mozilla.org/en-US/docs/Web/CSS/object-fit) with our responsive `object-fit` utility classes. This property tells the content to fill the container in a variety of ways; such as <i>"preserve that aspect ratio"</i> or <i>"stretch up and take up as much space as possible"</i>.
|
||||
|
||||
Classes for the value of `object-fit` are named using the format `.object-fit-{value}`. Choose from the following values
|
||||
|
||||
- `contain`
|
||||
- `cover`
|
||||
- `fill`
|
||||
- `scale` (for scale-down)
|
||||
- `none`
|
||||
|
||||
## Examples
|
||||
|
||||
Add the `object-fit-{value}` class to the [replaced element](https://developer.mozilla.org/en-US/docs/Web/CSS/Replaced_element):
|
||||
|
||||
{{< example class="d-flex overflow-auto" >}}
|
||||
{{< placeholder width="20%" height="120" class="object-fit-contain border rounded" text="Object Fit Contain" markup="img" >}}
|
||||
{{< placeholder width="20%" height="120" class="object-fit-cover border rounded" text="Object Fit Cover" markup="img" >}}
|
||||
{{< placeholder width="20%" height="120" class="object-fit-fill border rounded" text="Object Fit Fill" markup="img" >}}
|
||||
{{< placeholder width="20%" height="120" class="object-fit-scale border rounded" text="Object Fit Scale Down" markup="img" >}}
|
||||
{{< placeholder width="20%" height="120" class="object-fit-none border rounded" text="Object Fit None" markup="img" >}}
|
||||
{{< /example >}}
|
||||
|
||||
## Responsive
|
||||
|
||||
Responsive variations also exist for each `object-fit` value using the format `.object-fit-{breakpoint}-{value}`, for the following breakpoint abbreviations: `sm`, `md`, `lg`, `xl`, and `xxl`. Classes can be combined for various effects as you need.
|
||||
|
||||
|
||||
{{< example class="d-flex overflow-auto" >}}
|
||||
{{< placeholder width="20%" height="80" class="object-fit-sm-contain border rounded" text="Contain on sm" markup="img" >}}
|
||||
{{< placeholder width="20%" height="80" class="object-fit-md-contain border rounded" text="Contain on md" markup="img" >}}
|
||||
{{< placeholder width="20%" height="80" class="object-fit-lg-contain border rounded" text="Contain on lg" markup="img" >}}
|
||||
{{< placeholder width="20%" height="80" class="object-fit-xl-contain border rounded" text="Contain on xl" markup="img" >}}
|
||||
{{< placeholder width="20%" height="80" class="object-fit-xxl-contain border rounded" text="Contain on xxl" markup="img" >}}
|
||||
{{< /example >}}
|
||||
|
||||
## Video Tags
|
||||
|
||||
Just like `<img>` tags, the `.object-fit-{value}` and responsive `.object-fit-{breakpoint}-{value}` utilities also work on `<video>` tags.
|
||||
|
||||
```html
|
||||
<video src="..." class="object-fit-contain" autoplay></video>
|
||||
<video src="..." class="object-fit-cover" autoplay></video>
|
||||
<video src="..." class="object-fit-fill" autoplay></video>
|
||||
<video src="..." class="object-fit-scale" autoplay></video>
|
||||
<video src="..." class="object-fit-none" autoplay></video>
|
||||
```
|
||||
|
||||
### Utilities API
|
||||
|
||||
Object fit utilities are declared in our utilities API in `scss/_utilities.scss`. [Learn how to use the utilities API.]({{< docsref "/utilities/api#using-the-api" >}})
|
||||
|
||||
{{< scss-docs name="utils-object-fit" file="scss/_utilities.scss" >}}
|
||||
@@ -3,8 +3,11 @@ layout: docs
|
||||
title: Overflow
|
||||
description: Use these shorthand utilities for quickly configuring how content overflows an element.
|
||||
group: utilities
|
||||
toc: true
|
||||
---
|
||||
|
||||
## Overflow
|
||||
|
||||
Adjust the `overflow` property on the fly with four default values and classes. These classes are not responsive by default.
|
||||
|
||||
<div class="bd-example d-md-flex">
|
||||
@@ -29,6 +32,67 @@ Adjust the `overflow` property on the fly with four default values and classes.
|
||||
<div class="overflow-scroll">...</div>
|
||||
```
|
||||
|
||||
## Vertical and Horizontal Overflow
|
||||
|
||||
Specify how the overflowing content within the horizontal direction <i>(x-axis)</i> or vertical direction <i>(y-axis)</i> of the element should behave. Classes can be combined for various effects as you need.
|
||||
|
||||
### Overflow-x
|
||||
|
||||
Adjust the `overflow-x` property with four default values and classes. These will only affect the overflow of content horizontally:
|
||||
|
||||
<div class="bd-example d-md-flex">
|
||||
<div class="overflow-x-auto p-3 mb-3 mb-md-0 me-md-3 bg-light w-100" style="max-width: 200px; max-height: 100px; white-space: nowrap;">
|
||||
<div><code>.overflow-x-auto</code> example on an element</div>
|
||||
<div> with set width and height dimensions.</div>
|
||||
</div>
|
||||
<div class="overflow-x-hidden p-3 mb-3 mb-md-0 me-md-3 bg-light w-100" style="max-width: 200px; max-height: 100px;white-space: nowrap;">
|
||||
<div><code>.overflow-x-hidden</code> example</div>
|
||||
<div>on an element with set width and height dimensions.</div>
|
||||
</div>
|
||||
<div class="overflow-x-visible p-3 mb-3 mb-md-0 me-md-3 bg-light w-100" style="max-width: 200px; max-height: 100px;white-space: nowrap;">
|
||||
<div><code>.overflow-x-visible</code> example </div>
|
||||
<div>on an element with set width and height dimensions.</div>
|
||||
</div>
|
||||
<div class="overflow-x-scroll p-3 bg-light w-100" style="max-width: 200px; max-height: 100px;white-space: nowrap;">
|
||||
<div><code>.overflow-x-scroll</code> example on an element</div>
|
||||
<div> with set width and height dimensions.</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
```html
|
||||
<div class="overflow-x-auto">...</div>
|
||||
<div class="overflow-x-hidden">...</div>
|
||||
<div class="overflow-x-visible">...</div>
|
||||
<div class="overflow-x-scroll">...</div>
|
||||
```
|
||||
|
||||
|
||||
### Overflow-y
|
||||
|
||||
Adjust the `overflow-y` property with four default values and classes. These will only affect the overflow of content vertically:
|
||||
|
||||
<div class="bd-example d-md-flex">
|
||||
<div class="overflow-y-auto p-3 mb-3 mb-md-0 me-md-3 bg-light w-100" style="max-width: 200px; max-height: 100px;">
|
||||
<code>.overflow-y-auto</code> example on an element with set width and height dimensions.
|
||||
</div>
|
||||
<div class="overflow-y-hidden p-3 mb-3 mb-md-0 me-md-3 bg-light w-100" style="max-width: 200px; max-height: 100px;">
|
||||
<code>.overflow-y-hidden</code> example on an element with set width and height dimensions.
|
||||
</div>
|
||||
<div class="overflow-y-visible p-3 mb-3 mb-md-0 me-md-3 bg-light w-100" style="max-width: 200px; max-height: 100px;">
|
||||
<code>.overflow-y-visible</code> example on an element with set width and height dimensions.
|
||||
</div>
|
||||
<div class="overflow-y-scroll p-3 bg-light w-100" style="max-width: 200px; max-height: 100px;">
|
||||
<code>.overflow-y-scroll</code> example on an element with set width and height dimensions.
|
||||
</div>
|
||||
</div>
|
||||
|
||||
```html
|
||||
<div class="overflow-y-auto">...</div>
|
||||
<div class="overflow-y-hidden">...</div>
|
||||
<div class="overflow-y-visible">...</div>
|
||||
<div class="overflow-y-scroll">...</div>
|
||||
```
|
||||
|
||||
Using Sass variables, you may customize the overflow utilities by changing the `$overflows` variable in `_variables.scss`.
|
||||
|
||||
## Sass
|
||||
|
||||
Reference in New Issue
Block a user