캔버스 요소에 'object-fit'을 사용할 수 있나요?

object-fit이 Canvas Element와 작동합니까?

object-fit 속성은 이미지의 크기 조정 및 위치 지정을 제어하도록 설계되었습니다. 컨테이너 내의 비디오. 하지만 캔버스 요소와의 호환성이 논란의 대상이었습니다.

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

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

이 예에서 첫 번째 캔버스는 원래 가로 세로 비율을 유지하고 두 번째 캔버스는 object-fit을 사용하여 컨테이너 내에 맞도록 크기가 조정됩니다. 값. 세 번째 캔버스는 object-fit:cover를 사용하여 컨테이너를 덮도록 크기가 조정됩니다.

위 내용은 캔버스 요소에 'object-fit'을 사용할 수 있나요?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!