Heim > Artikel > Web-Frontend > 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:
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 abdecktDas 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!