Pouvez-vous utiliser l'ajustement d'objet avec des éléments de canevas ?

Comprendre l'ajustement d'objet dans les éléments Canvas

L'ajustement d'objet est une propriété CSS qui détermine comment le contenu d'un élément s'intègre dans son conteneur parent. Cependant, son comportement peut être incohérent lorsqu'il est appliqué à des éléments remplacés comme le canevas.

L'ajustement d'objet peut-il être utilisé avec des éléments de canevas ?

Oui, l'ajustement d'objet peut être utilisé avec des éléments de toile. Cependant, son impact est limité aux cas où un changement de rapport se produit, entraînant une distorsion.

Comment l'ajustement d'objet affecte les éléments du canevas

L'ajustement d'objet n'affectera qu'un élément canvas lorsque son rapport hauteur/largeur diffère de celui de son conteneur parent. Dans de tels cas, la propriété spécifie comment le contenu du canevas est mis à l'échelle ou recadré pour s'adapter à l'espace disponible.

Types d'ajustement d'objet pour les éléments du canevas

• contain : réduit le contenu pour l'adapter au conteneur parent, en préservant l'aspect ratio.
• cover : Agrandit le contenu pour couvrir le conteneur parent, recadrant potentiellement une partie du contenu.

Exemple

Considérez l'extrait de code suivant :

<div class="box">
  <canvas width="200" height="200"></canvas>
</div>

<div class="box">
  <canvas width="200" height="200" style="object-fit:contain;"></canvas>
</div>

<div class="box">
  <canvas width="200" height="200" style="object-fit:cover;"></canvas>
</div>

Dans cet exemple, les trois les éléments du canevas ont initialement la même taille. Cependant, l'élément avec object-fit:contain réduira son contenu pour l'adapter au conteneur parent, tandis que l'élément avec object-fit:cover agrandira son contenu pour couvrir le conteneur, recadrant une partie du contenu.

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!