CSS \'object-fit: contain\'을 사용할 때 원본 이미지 너비를 유지하는 방법은 무엇입니까?

CSS 객체 맞춤: 포함; 레이아웃에서 원본 이미지 너비 유지

CSS의 object-fit: contain 속성을 사용하여 Flexbox 컨테이너 내에서 이미지 크기를 조정하는 경우 레이아웃이 원본 이미지 너비를 유지하면서 이미지 자체의 크기가 적절하게 조정될 수 있습니다. 이로 인해 가로 스크롤 막대가 나타날 수 있습니다.

이러한 현상이 발생하는 이유를 이해하려면 개체 맞춤이 작동하는 방식을 이해하는 것이 중요합니다. 더 간단한 예를 살펴보겠습니다.

<code class="css">.box {
  width: 300px;
  height: 300px;
  border: 1px solid;
}
img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}</code>

<code class="html"><div class="box">
  <img src="https://picsum.photos/300/200?image=1069">
</div></code>

이 시나리오에서 img 요소는 가로 세로 비율을 유지하면서 .box 컨테이너 내에 완전히 들어가도록 지시됩니다. 하지만 컨테이너의 너비가 고정되어 있기 때문에 이미지 자체를 확장할 공간이 충분하지 않을 수 있습니다.

여기서 object-fit: contain이 중요합니다. 컨테이너의 너비 및 높이 제약 조건에 맞게 이미지의 크기를 축소합니다. 그러나 img 요소의 원래 너비는 동일하게 유지됩니다. 이는 img 요소의 너비 및 높이 속성이 표시되는 이미지 크기에만 영향을 미치고 기본 이미지의 실제 크기에는 영향을 미치지 않기 때문입니다.

원본 코드의 문제를 해결하려면 다음을 고려할 수 있습니다.

• img 요소에 width: 100% 및 height: auto를 사용하면 원래 가로 세로 비율에 따라 자연스럽게 크기가 조정됩니다.
• 오버플로를 추가하여 컨테이너 요소에 숨김을 방지합니다. 가로 스크롤바가 나타나지 않습니다.

위 내용은 CSS \'object-fit: contain\'을 사용할 때 원본 이미지 너비를 유지하는 방법은 무엇입니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!