Maison > Article > interface Web > 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 :
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!