Kann die Objektanpassung auf Leinwandelemente angewendet werden?
Trotz umfangreicher Forschung war es schwierig festzustellen, ob die Objektanpassung möglich ist Wird mit Leinwandelementen verwendet. Einige Experimente haben unerwartetes Verhalten gezeigt, was Entwickler hinsichtlich seiner Funktionalität im Unklaren lässt.
Objektanpassung definieren
Objektanpassung bestimmt, wie ein Objekt auf Änderungen seines Seitenverhältnisses reagiert . Wenn sich die Abmessungen eines übergeordneten Elements ändern, passt die Eigenschaft „Objektanpassung“ das enthaltene Objekt an, um seine Integrität zu wahren. Diese Eigenschaft gilt ausschließlich für ersetzte Elemente, zu denen auch Canvas-Elemente gehören.
Auswirkung auf Canvas-Elemente
Objektanpassung wird nur wirksam, wenn sich das Verhältnis ändert, d. h. wenn das Seitenverhältnis des Canvas-Elements geändert wird. In solchen Szenarien wendet die object-fit-Eigenschaft die folgenden Transformationen an:
Beispiel
Der folgende Code demonstriert die Auswirkung der Objektanpassung auf Canvas-Elemente:
<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 Fall wird das Element ohne Objektanpassung verzerrt, während das Element mit Objekt -fit: CONTAIN behält sein ursprüngliches Seitenverhältnis bei. Das Element mit object-fit: cover streckt das Bild, um die Abmessungen des übergeordneten Elements auszufüllen.
Das obige ist der detaillierte Inhalt vonFunktioniert „object-fit' mit Canvas-Elementen?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!