L'ajustement d'objet fonctionne-t-il avec les éléments du canevas : une réponse définitive

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

Dans le monde des graphiques HTML5, la propriété d'ajustement d'objet est un outil précieux pour contrôler l’apparence des images. Cet attribut vous permet de spécifier comment une image s'intègre dans son conteneur, influençant son rapport hauteur/largeur et son positionnement. Cependant, des questions ont été soulevées concernant l'efficacité de l'ajustement d'objet lorsqu'il est utilisé avec des éléments de canevas.

Le dilemme

La confusion surgit car il n'existe pas de documentation claire indiquant si l'ajustement d'objet L'ajustement peut être appliqué aux éléments du canevas. L'expérimentation a donné des résultats inattendus, laissant les développeurs incertains quant à sa véritable fonctionnalité.

La réponse définitive

Pour fournir une réponse définitive, examinons les spécifications de l'ajustement d'objet . Selon la définition officielle, l'ajustement d'objet s'applique uniquement aux éléments remplacés, qui incluent les images, les vidéos et les éléments de canevas.

Éléments remplacés et ajustement d'objet

Pour que l'ajustement de l'objet ait un effet, il doit y avoir un changement de rapport (une distorsion) entre le rapport hauteur/largeur d'origine de l'image et le rapport hauteur/largeur du conteneur. Lorsque cette distorsion se produit, l'ajustement de l'objet dicte la manière dont l'image est ajustée pour s'adapter au conteneur.

Exemple

Considérez le code HTML et CSS suivant :

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

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

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

Par défaut, le canevas ne présentera pas de comportement d'ajustement d'objet. Maintenant, ajoutez la propriété object-fit au canevas :

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

Avec la propriété object-fit:cover, le canevas se déformera pour remplir l'espace disponible dans le conteneur, en conservant ses proportions.

Conclusion

En conclusion, l'ajustement d'objet fonctionne avec les éléments du canevas, à condition qu'il y ait un changement de rapport entre le rapport hauteur/largeur d'origine du canevas et le rapport hauteur/largeur du conteneur. Lorsque cette distorsion se produit, l'ajustement d'objet peut être utilisé pour contrôler la manière dont le canevas est ajusté pour s'adapter au conteneur, permettant ainsi des présentations graphiques flexibles et visuellement attrayantes.

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!