Flexbox 열의 이미지에 `object-fit`이 작동하지 않는 이유는 무엇입니까?

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

이 문의의 목표는 "객체 적합"을 활용하는 것입니다. -fit: Cover" 속성을 사용하여 Flexbox 열 내에서 이미지 크기를 조정합니다. 그러나 이미지는 조정되지 않은 상태로 유지되는 것으로 관찰되었습니다. 이 문서에서는 기본 메커니즘을 명확하게 설명하고 솔루션을 제공합니다.

"object-fit"의 원리

사양에 따라 "object-fit"은 대체된 요소의 콘텐츠는 높이와 너비로 정의된 상자 안에 맞습니다.

키 관찰

결정적으로 "object-fit" 속성은 상위 컨테이너가 아닌 대체 요소 자체(이 경우 이미지)에 적용됩니다.

해결책 : Flex 항목 내 중첩

문제를 해결하려면 이미지가 중첩되지 않고 Flex 항목이 되어야 합니다. 플렉스 컨테이너 내에서.

수정된 코드

.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>

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