Canvas 要素で Object-Fit を使用できますか?

キャンバス要素の Object-Fit について

Object-fit は、要素のコンテンツが親コンテナー内にどのように収まるかを決定する CSS プロパティです。ただし、canvas などの置換された要素に適用すると、動作に一貫性がなくなる可能性があります。

Can Object-Fit は Canvas 要素で使用できますか?

はい、object-fit は使用できます。 Canvas 要素とともに使用されます。ただし、その影響は、比率の変更が発生して歪みが生じる場合に限定されます。

オブジェクト フィットがキャンバス要素に与える影響

オブジェクト フィットは、キャンバス要素にのみ影響します。 Canvas 要素のアスペクト比が親コンテナと異なる場合。このような場合、プロパティは、利用可能なスペースに合わせてキャンバスのコンテンツを拡大縮小またはトリミングする方法を指定します。

キャンバス要素のオブジェクト フィットのタイプ

• contain: アスペクト比を維持しながら、親コンテナ内に収まるようにコンテンツを縮小します。
• cover: 親コンテナを覆うようにコンテンツを拡大します。一部が切り取られる可能性があります。

例

次のコード スニペットを考えてみましょう。

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

この例では、3 つのキャンバス要素すべてに最初は同じサイズ。ただし、object-fit:contain を持つ要素は、親コンテナー内に収まるようにコンテンツをスケールダウンしますが、object-fit:cover を持つ要素は、コンテナーを覆うようにコンテンツをスケールアップし、コンテンツの一部を切り取ります。

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