Flexbox 컨테이너 내부의 이미지에서 `object-fit`이 올바르게 작동하지 않는 이유는 무엇입니까?

왜 object-fit이 Flexbox에서 작동하지 않나요?

flexbox 열 내의 이미지에 object-fit:cover 속성을 적용하려고 하면 사용자가 다음과 같은 문제를 겪을 수 있습니다. 이미지 크기가 예상대로 조정되지 않는 문제. 설명은 object-fit 속성의 사양에 있습니다.

CSS 사양에 따르면 object-fit은 사용된 높이와 너비에 따라 설정된 상자 내에서 대체된 요소 콘텐츠의 피팅을 결정합니다. 이미지의 경우 대체 요소는 이미지 컨테이너가 아니라 이미지 자체입니다. 따라서 object-fit 속성은 Flex 항목의 크기가 아닌 이미지 자체의 높이와 너비에 적용됩니다.

해결책:

이 문제를 극복하려면 이미지 자체가 플렉스 아이템이 되도록 플렉스박스를 설정합니다. 이를 통해 object-fit 속성을 이미지에 효과적으로 적용하여 원하는 크기 조정 동작을 얻을 수 있습니다.

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

img {
  object-fit: cover;
  flex: 1;
  margin-right: 1rem;
  overflow: hidden;
  height: 400px;
}

<div class="container">
  <img src="http://placehold.it/1920x1080">
  <img src="http://placehold.it/1920x1080">
  <img src="http://placehold.it/1920x1080">
  <img src="http://placehold.it/1920x1080">
</div>

이미지를 플렉스 항목으로 만들면 이제 object-fit 속성이 제대로 작동할 수 있습니다. 할당된 플렉스 컨테이너 공간 내에 이미지를 맞춰 원하는 표지 크기 동작을 구현합니다.

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