> 웹 프론트엔드 > CSS 튜토리얼 > IE 및 Edge에서 'object-fit:cover' 이미지 크기 조정을 달성하는 방법은 무엇입니까?

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

Barbara Streisand
풀어 주다: 2024-11-02 00:36:02
원래의
969명이 탐색했습니다.

How to Achieve `object-fit: cover;` Image Scaling in IE and Edge?

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

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

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

  1. 다음 코드를 사용하여 컨테이너 내에 이미지를 절대적으로 배치합니다.
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
로그인 후 복사

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

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

    height: 100%;
    width: auto;
    로그인 후 복사
  • 가로 블록(높이보다 너비가 큼):

    height: auto;
    width: 100%;
    로그인 후 복사

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

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

원천:php.cn
본 웹사이트의 성명
본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.
저자별 최신 기사
인기 튜토리얼
더>
최신 다운로드
더>
웹 효과
웹사이트 소스 코드
웹사이트 자료
프론트엔드 템플릿