IE 및 Edge에서 'object-fit:cover' 이미지 크기 조정을 달성하는 방법은 무엇입니까?

IE 및 Edge의 이미지 크기 조정에 대한 CSS 수정

object-fit을 사용하는 경우:cover; 페이지의 이미지에 대한 CSS 규칙으로 인해 IE 또는 Edge에서 브라우저 크기를 조정할 때 확대/축소하는 대신 이미지의 너비(높이 아님) 크기가 조정되는 문제가 발생할 수 있습니다. 이로 인해 이미지가 왜곡됩니다.

이 문제를 해결하려면 CSS 솔루션을 구현할 수 있습니다.

1. 다음 코드를 사용하여 컨테이너 내에 이미지를 절대적으로 배치합니다.

position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);

이렇게 하면 이미지가 컨테이너 내 중앙에 배치됩니다.

2. 이미지 방향(세로 또는 가로)에 따라 높이 및 너비 속성을 적절하게 설정합니다.

• 세로 블록(너비보다 높이가 큼):

  height: 100%;
  width: auto;

• 가로 블록(높이보다 너비가 큼):

  height: auto;
  width: 100%;

이렇게 하면 이미지에 원하는 개체 맞춤이 제공됩니다. IE 및 Edge에서 크기 조정 시 비례적으로 크기가 조정됩니다.

위 내용은 IE 및 Edge에서 'object-fit:cover' 이미지 크기 조정을 달성하는 방법은 무엇입니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!