Pouvez-vous utiliser « object-fit » avec des éléments Canvas ?

L'ajustement d'objet fonctionne-t-il avec l'élément Canvas ?

La propriété d'ajustement d'objet est conçue pour contrôler la mise à l'échelle et le positionnement d'une image ou vidéo dans son conteneur. Cependant, sa compatibilité avec les éléments du canevas a été un sujet de débat.

L'ajustement d'objet peut-il être appliqué aux éléments de canevas ?

Oui, l'ajustement d'objet peut être appliqué aux éléments de canevas. Cependant, cela ne prend effet que lorsqu'il y a un changement dans les proportions du conteneur de canevas, provoquant une distorsion de l'image ou du dessin.

Comprendre le fonctionnement de l'ajustement d'objet avec Canvas

Pour un élément de canevas, l'ajustement d'objet se comporte différemment en fonction des scénarios suivants :

• Lorsque le rapport d'aspect du conteneur correspond au rapport d'aspect du canevas : Aucune mise à l'échelle ou des changements de positionnement se produisent.
• Lorsque le rapport hauteur/largeur du conteneur diffère du rapport hauteur/largeur du canevas : l'ajustement de l'objet devient applicable. Le canevas sera mis à l'échelle et positionné dans le conteneur en fonction de la valeur spécifiée.

Exemple :

Considérez l'extrait CSS suivant :

<code class="css">canvas {
  width: 100px;
  height: 250px;
  border: 1px solid red;
  display: block;
}

.box {
  display: inline-block;
  border: 2px solid green;
}</code>

Et le code HTML suivant :

<code class="html"><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></code>

Dans cet exemple, le premier canevas conservera ses proportions d'origine, tandis que le second sera mis à l'échelle pour s'adapter au conteneur à l'aide de l'ajustement d'objet : contenir valeur. Le troisième canevas sera mis à l'échelle pour recouvrir le conteneur à l'aide de object-fit: cover.

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!