「object-fit」是否適用於畫布元素？

物件擬合可以應用在畫布元素上嗎？

儘管進行了大量研究，但很難確定物件擬合是否可以應用於畫布元素？與畫布元素一起使用。一些實驗顯示出意外的行為，使開發人員對其功能不確定。

定義物件擬合

物件擬合確定物件對其縱橫比變化的反應。當父元素的尺寸改變時，object-fit 屬性會調整所包含的物件以保持其完整性。此屬性僅適用於替換元素，其中包括畫布元素。

對畫布元素的影響

物件擬合僅在比例發生變化時生效，即：當畫布元素的縱橫比改變時。在這種情況下，object-fit 屬性會套用以下轉換：

• Object-fit: cover: 拉伸包含的影像以覆蓋整個父元素，可能會扭曲影像.
• Object-fit: contains: 保持父元素內影像的縱橫比，必要時留出空白空間。

範例

下面的程式碼示範了canvas元素上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的元素會扭曲-fit：包含將保持其原始縱橫比。具有 object-fit: cover 的元素將拉伸圖像以填充父元素的尺寸。

以上是「object-fit」是否適用於畫布元素？的詳細內容。更多資訊請關注PHP中文網其他相關文章！