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

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 중국어 웹사이트의 기타 관련 기사를 참조하세요!