Object-Fit: IE 및 Edge에서 덮개가 실패합니다. 해결 방법은 무엇입니까?

Object-Fit: Cover가 IE 및 Edge에서 실패합니다. 해결 방법

object-fit 활용: Cover; 일관된 이미지 높이를 유지하기 위한 CSS의 기능은 여러 브라우저에서 원활하게 작동합니다. 하지만 IE와 Edge에서는 특이한 문제가 발생합니다. 브라우저 크기를 조정하면 이미지의 높이가 확대되지 않고 너비가 조정되어 모양이 왜곡됩니다.

이 문제를 해결하기 위해 우리는 문제를 해결하는 영리한 CSS 솔루션을 사용합니다.

위치: 절대;
상단: 50%;
왼쪽: 50%;
변형: 번역(-50%, -50%);
높이: 100%;
너비: 자동; // 수직 블록의 경우
높이: 자동;
너비: 100%; // 수평 블록의 경우

이 조합은 절대 위치 지정을 사용하여 이미지를 중앙에 배치하여 IE 및 Edge의 object-fit:cover 문제를 제거합니다. 이제 이미지 크기가 비례적으로 조정되어 왜곡 없이 원하는 효과를 유지합니다.

솔루션의 효과를 설명하려면 다음 데모를 고려하십시오.

이미지 크기 조정 데모

이 접근 방식은 모든 브라우저에서 일관된 이미지 동작을 보장하여 IE 및 Edge의 개체 맞춤: 커버 문제를 효과적으로 해결합니다.

위 내용은 Object-Fit: IE 및 Edge에서 덮개가 실패합니다. 해결 방법은 무엇입니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!