Est-ce que « object-fit » fonctionne avec les éléments Canvas ?

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

Malgré des recherches approfondies, il a été difficile de déterminer si l'ajustement d'objet peut être utilisé avec des éléments de toile. Certaines expériences ont montré un comportement inattendu, laissant les développeurs incertains quant à sa fonctionnalité.

Définition de l'ajustement d'objet

L'ajustement d'objet détermine la manière dont un objet réagit aux modifications de ses proportions. . Lorsque les dimensions d'un élément parent changent, la propriété object-fit ajuste l'objet contenu pour maintenir son intégrité. Cette propriété s'applique uniquement aux éléments remplacés, qui incluent les éléments de canevas.

Effet sur les éléments de canevas

L'ajustement d'objet ne prend effet que lorsqu'il y a un changement de rapport, c'est-à-dire : lorsque le rapport hauteur/largeur de l’élément canevas est modifié. Dans de tels scénarios, la propriété object-fit applique les transformations suivantes :

• Object-fit : cover : Étire l'image contenue pour couvrir l'intégralité de l'élément parent, déformant potentiellement l'image .
• Object-fit : contain : Conserve les proportions de l'image dans l'élément parent, en laissant un espace vide si nécessaire.

Exemple

Le code suivant démontre l'effet de l'ajustement d'objet sur les éléments du canevas :

<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 ce cas, l'élément sans ajustement d'objet se déformera, tandis que l'élément avec objet -fit : contain conservera son rapport hauteur/largeur d'origine. L'élément avec object-fit: cover étirera l'image pour remplir les dimensions de l'élément parent.

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!