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

Funktioniert object-fit mit Canvas Element?

Die object-fit-Eigenschaft dient zur Steuerung der Skalierung und Positionierung eines Bildes oder Video in seinem Container. Die Kompatibilität mit Canvas-Elementen war jedoch umstritten.

Kann Objektanpassung auf Canvas-Elemente angewendet werden?

Ja, Objektanpassung kann angewendet werden zu Leinwandelementen. Es wird jedoch nur wirksam, wenn sich das Seitenverhältnis des Canvas-Containers ändert und das Bild oder die Zeichnung verzerrt wird.

Verstehen, wie Objektanpassung mit Canvas funktioniert

Bei einem Canvas-Element verhält sich die Objektanpassung basierend auf den folgenden Szenarien anders:

• Wenn das Container-Seitenverhältnis mit dem Canvas-Seitenverhältnis übereinstimmt: Keine Skalierung oder Positionierungsänderungen treten auf.
• Wenn das Seitenverhältnis des Containers vom Seitenverhältnis der Leinwand abweicht: Objektanpassung wird anwendbar. Die Leinwand wird entsprechend dem angegebenen Wert skaliert und innerhalb des Containers positioniert.

Beispiel:

Beachten Sie das folgende CSS-Snippet:

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

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

Und der folgende HTML-Code:

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

In diesem Beispiel behält die erste Leinwand ihr ursprüngliches Seitenverhältnis bei, während die zweite mithilfe von object-fit:container so skaliert wird, dass sie in den Container passt Wert. Die dritte Leinwand wird mithilfe von object-fit: cover.

so skaliert, dass sie den Container abdeckt

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!