Ajustement de l'objet

Utilisez les utilitaires d'ajustement d'objet pour modifier la façon dont le contenu d'un élément remplacé , tel qu'un <img>ou <video>, doit être redimensionné pour s'adapter à son conteneur.

Sur cette page

Comment ça fonctionne

Modifiez la valeur de la object-fitpropriété avec nos object-fit classes utilitaires réactives. Cette propriété indique au contenu de remplir le conteneur parent de différentes manières, par exemple en préservant les proportions ou en l'étirant pour occuper autant d'espace que possible.

Les classes pour la valeur de object-fit sont nommées au format .object-fit-{value}. Choisissez parmi les valeurs suivantes :

contain
cover
fill
scale(pour une réduction)
none

Exemples

Ajoutez la object-fit-{value} classe à l' élément remplacé :


<img src="..." class="object-fit-contain border rounded" alt="...">
<img src="..." class="object-fit-cover border rounded" alt="...">
<img src="..." class="object-fit-fill border rounded" alt="...">
<img src="..." class="object-fit-scale border rounded" alt="...">
<img src="..." class="object-fit-none border rounded" alt="...">

Sensible

Des variantes réactives existent également pour chaque object-fit valeur utilisant le format .object-fit-{breakpoint}-{value}, pour les abréviations de point d'arrêt suivantes : sm, md, lg, xl et xxl. Les cours peuvent être combinés pour obtenir différents effets selon vos besoins.


<img src="..." class="object-fit-sm-contain border rounded" alt="...">
<img src="..." class="object-fit-md-contain border rounded" alt="...">
<img src="..." class="object-fit-lg-contain border rounded" alt="...">
<img src="..." class="object-fit-xl-contain border rounded" alt="...">
<img src="..." class="object-fit-xxl-contain border rounded" alt="...">

Video

Les utilitaires .object-fit-{value} et responsive .object-fit-{breakpoint}-{value} fonctionnent également sur <video> les éléments.


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

CSS

API des utilitaires Sass

Les utilitaires d'ajustement d'objet sont déclarés dans notre API d'utilitaires dans scss/_utilities.scss. Découvrez comment utiliser l'API des utilitaires.


"object-fit": (
  responsive: true,
  property: object-fit,
  values: (
    contain: contain,
    cover: cover,
    fill: fill,
    scale: scale-down,
    none: none,
  )
),

Bootstrap 5.2 | Utilitaires