> 웹 프론트엔드 > CSS 튜토리얼 > Flexbox에서 'object-fit'이 작동하지 않는 이유는 무엇입니까?

Flexbox에서 'object-fit'이 작동하지 않는 이유는 무엇입니까?

Barbara Streisand
풀어 주다: 2024-12-10 03:56:12
원래의
890명이 탐색했습니다.

Why Isn't My `object-fit` Working in Flexbox?

Flexbox에서 Object-Fit이 작동하지 않는 경우: 이유와 해결 방법

Object-fit은 이미지 크기 조정 방법을 제어하는 ​​CSS 속성입니다. 컨테이너에 맞게. 하지만 flexbox 레이아웃에서는 object-fit이 예상대로 작동하지 않는 것처럼 보일 수 있습니다.

그 이유는 object-fit이 컨테이너가 아닌 교체된 요소 자체에서 작동하기 때문입니다. 이 경우 이미지는 래퍼 div가 아니라 교체된 요소입니다.

Flexbox에서 의도한 대로 객체 맞춤 작업을 수행하려면 이미지가 Flex 항목이 되어야 합니다. 이렇게 하면 이미지 자체에 flex 속성을 설정하여 object-fit이 올바르게 적용되도록 할 수 있습니다.

수정된 코드는 다음과 같습니다.

.container {
  display: flex;
  flex-direction: row;
  width: 100%;
}

img {
  object-fit: cover;
  flex: 1;
  margin-right: 1rem;
  overflow: hidden;
  height: 400px;
}
로그인 후 복사

이 업데이트된 코드에서 이미지는 플렉스 아이템이고, 객체 맞춤이 직접 적용됩니다. 이제 이미지는 가로 세로 비율을 유지하면서 전체 컨테이너를 덮도록 크기가 조정됩니다.

위 내용은 Flexbox에서 'object-fit'이 작동하지 않는 이유는 무엇입니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!

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