Können Sie Object-Fit mit Canvas-Elementen verwenden?

Objektanpassung in Canvas-Elementen verstehen

Objektanpassung ist eine CSS-Eigenschaft, die bestimmt, wie der Inhalt eines Elements in seinen übergeordneten Container passt. Allerdings kann sein Verhalten inkonsistent sein, wenn es auf ersetzte Elemente wie Canvas angewendet wird.

Kann Object-Fit mit Canvas-Elementen verwendet werden?

Ja, Object-Fit ist möglich Wird mit Leinwandelementen verwendet. Die Auswirkung ist jedoch auf Fälle beschränkt, in denen eine Verhältnisänderung auftritt, die zu Verzerrungen führt.

Wie sich die Objektanpassung auf Leinwandelemente auswirkt

Die Objektanpassung wirkt sich nur auf a aus Canvas-Element, wenn sein Seitenverhältnis vom übergeordneten Container abweicht. In solchen Fällen gibt die Eigenschaft an, wie der Canvas-Inhalt skaliert oder zugeschnitten wird, um ihn an den verfügbaren Platz anzupassen.

Arten der Objektanpassung für Canvas-Elemente

• enthalten: Skaliert den Inhalt so, dass er in den übergeordneten Container passt, wobei das Aussehen erhalten bleibt Verhältnis.
• cover: Skaliert den Inhalt so, dass er den übergeordneten Container abdeckt, wobei möglicherweise ein Teil des Inhalts abgeschnitten wird.

Beispiel

Betrachten Sie den folgenden Codeausschnitt:

<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>

In diesem Beispiel alle drei Canvas-Elemente haben zunächst die gleiche Größe. Allerdings skaliert das Element mit object-fit:contain seinen Inhalt so, dass er in den übergeordneten Container passt, während das Element mit object-fit:cover seinen Inhalt so skaliert, dass er den Container abdeckt und einen Teil des Inhalts abschneidet.

Das obige ist der detaillierte Inhalt vonKönnen Sie Object-Fit mit Canvas-Elementen verwenden?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!