'object-fit'은 캔버스 요소와 함께 작동합니까?

캔버스 요소에 Object-fit을 적용할 수 있나요?

광범위한 연구에도 불구하고 Object-fit을 적용할 수 있는지 판단하기 어려웠습니다. 캔버스 요소와 함께 사용됩니다. 일부 실험에서는 예상치 못한 동작이 나타나 개발자가 해당 기능에 대해 확신을 갖지 못하게 되었습니다.

객체 맞춤 정의

객체 맞춤은 객체가 종횡비 변화에 반응하는 방식을 결정합니다. . 상위 요소의 크기가 변경되면 객체 맞춤 속성은 포함된 객체를 조정하여 무결성을 유지합니다. 이 속성은 캔버스 요소를 포함하는 대체 요소에만 적용됩니다.

캔버스 요소에 미치는 영향

객체 맞춤은 비율이 변경될 때만 적용됩니다. 즉, 캔버스 요소의 종횡비가 변경될 때. 이러한 시나리오에서 object-fit 속성은 다음 변환을 적용합니다.

• Object-fit:cover: 포함된 이미지를 전체 상위 요소를 덮도록 늘려 이미지를 왜곡할 수 있습니다. .
• 객체 맞춤: 포함: 필요한 경우 빈 공간을 남겨두고 상위 요소 내에서 이미지의 가로 세로 비율을 유지합니다.

예

다음 코드는 개체 맞춤이 캔버스 요소에 미치는 영향을 보여줍니다.

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

이 경우 개체 맞춤이 없는 요소는 왜곡되고 개체가 있는 요소는 왜곡됩니다. -fit: 포함은 원래 종횡비를 유지합니다. object-fit:cover가 포함된 요소는 이미지를 늘려 상위 요소의 크기를 채웁니다.

위 내용은 'object-fit'은 캔버스 요소와 함께 작동합니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!