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

Flexbox에서 object-fit이 작동하지 않는 이유

Flexbox에서 object-fit을 구현하는 데 문제가 있음에도 불구하고 동일한 너비의 열은 조정되지 않은 상태로 유지되며 속성 정의에 근거한 논리적 설명이 있습니다.

설명된 대로 사양에서 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 중국어 웹사이트의 기타 관련 기사를 참조하세요!