Canvas 要素で「object-fit」を使用できますか?

object-fit は Canvas 要素で機能しますか?

object-fit プロパティは、画像のスケーリングと位置を制御するように設計されています。コンテナ内のビデオ。ただし、canvas 要素との互換性については議論の的となっています。

Can object-fit Be Applied to Canvas Elements?

はい、object-fit は適用できます。キャンバス要素に。ただし、これが有効になるのは、キャンバス コンテナのアスペクト比が変更され、画像や描画に歪みが生じた場合のみです。

Canvas での object-fit の仕組みを理解する

キャンバス要素の場合、object-fit は次のシナリオに基づいて異なる動作をします:

• コンテナのアスペクト比がキャンバスのアスペクト比と一致する場合: スケーリングなし、または位置変更が発生します。
• コンテナのアスペクト比がキャンバスのアスペクト比と異なる場合: object-fit が適用されます。キャンバスは、指定された値に従ってコンテナー内で拡大縮小され、配置されます。

例:

次の CSS スニペットを考えてみましょう:

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

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

および次の HTML:

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

この例では、最初のキャンバスは元のアスペクト比を維持し、2 番目のキャンバスは object-fit: contains を使用してコンテナ内に収まるように拡大縮小されます。価値。 3 番目のキャンバスは、object-fit: cover を使用してコンテナーを覆うように拡大縮小されます。

以上がCanvas 要素で「object-fit」を使用できますか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。