IE와 Edge에서 'object-fit:cover' 동작을 달성하는 방법은 무엇입니까?

IE 및 Edge에서 Object-Fit을 사용하여 이미지의 가로 세로 비율 문제 해결

CSS의 object-fit 속성에 대한 광범위한 지원에도 불구하고 일부 Internet Explorer(IE) 및 Microsoft Edge와 같은 브라우저는 이미지 크기를 조정할 때 바람직하지 않은 동작을 나타낼 수 있습니다. 이미지의 높이 대신 너비가 조정되어 가로 세로 비율이 왜곡될 수 있습니다.

이 문제를 해결하려면 다음 CSS 기술을 사용할 수 있습니다.

1. 이미지를 내부에 절대적으로 배치합니다. 해당 컨테이너:

   position: absolute;

2. 상단, 왼쪽 및 변형 속성의 조합을 사용하여 이미지 중앙에 배치:

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

3. 조정 방향에 따라 이미지의 높이와 너비:

   // Vertically-oriented blocks
   height: 100%;
   width: auto;
   
   // Horizontally-oriented blocks
   height: auto;
   width: 100%;

이 접근 방식을 사용하면 이미지가 개체 맞춤: 덮개 효과를 모방할 수 있어 크기 조정 시 가로 세로 비율이 유지됩니다.

이 기술의 라이브 데모는 다음과 같습니다.

https://jsfiddle.net/furqan_694/s3xLe1gp/

이 솔루션은 브라우저 간 호환이 가능하므로 이미지가 IE, Edge 및 기타 최신 브라우저에서는 올바르게 표시됩니다.

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