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

キャンバス要素にオブジェクト フィットを適用できますか?

広範な研究にもかかわらず、オブジェクト フィットがキャンバス要素に適用できるかどうかを判断することは困難でした。 Canvas 要素とともに使用されます。一部の実験では予期しない動作が示され、開発者はその機能について不安を感じています。

オブジェクト フィットの定義

オブジェクト フィットは、オブジェクトがアスペクト比の変化にどのように反応するかを決定します。 。親要素の寸法が変更されると、object-fit プロパティは、含まれるオブジェクトを調整して整合性を維持します。このプロパティは、キャンバス要素を含む、置換された要素にのみ適用されます。

キャンバス要素への影響

オブジェクトフィットは、比率が変更された場合にのみ有効になります。 Canvas 要素のアスペクト比が変更されたとき。このようなシナリオでは、object-fit プロパティは次の変換を適用します。

• Object-fit: cover: 親要素全体をカバーするように含まれる画像を引き伸ばし、画像が歪む可能性があります。 .
• Object-fit: contains: 親要素内の画像のアスペクト比を維持し、必要に応じて空のスペースを残します。

例

次のコードは、キャンバス要素に対する object-fit の効果を示しています。

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

この場合、object-fit のない要素は歪みますが、object のある要素は歪みます。 -fit: contains は元のアスペクト比を維持します。 object-fit: cover を持つ要素は、親要素の寸法を満たすように画像を引き伸ばします。

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