Object-Fit: 포함이 Flexbox 레이아웃에서 원본 이미지 너비를 유지하는 이유는 무엇입니까?

객체 적합: 포함; 레이아웃에서 원본 이미지 너비 유지

Flexbox 컨테이너 내에서 반응형 이미지를 유지하려면 객체 맞춤: 포함을 활용하는 경우가 많습니다. 이미지 크기를 조정하면 문제가 해결되지만 기본 레이아웃은 원래 이미지 너비를 유지하여 가로 스크롤을 도입할 수 있습니다. 이 동작은 object-fit: contain의 예상 결과입니다.

이 동작을 이해하려면 더 간단한 예를 고려하십시오.

<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="/static/imghwm/default1.png" data-src="image.jpg" class="lazy" alt="Object-Fit: 포함이 Flexbox 레이아웃에서 원본 이미지 너비를 유지하는 이유는 무엇입니까?" >
</div></code>

이 시나리오에서 이미지 크기가 상자보다 크면 이미지가 상자 안에 완전히 맞도록 축소됩니다. 그러나 이미지의 가로 세로 비율은 유지되어 잠재적으로 원래 너비가 보존됩니다.

이 원칙을 Flexbox 레이아웃에 적용하면 이미지 크기가 실제로 컨테이너에 맞게 조정됩니다. 그러나 컨테이너 자체는 원본 이미지 너비에 맞게 늘어납니다. 이를 방지하려면 컨테이너의 최대 너비를 설정하거나 이미지 응답성을 유지하기 위한 대체 접근 방식을 모색하는 것이 좋습니다.

위 내용은 Object-Fit: 포함이 Flexbox 레이아웃에서 원본 이미지 너비를 유지하는 이유는 무엇입니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!