object-fit을 사용하여 이미지 크기를 적절하게 조정하는 방법: 포함

object-fit 이해: 포함 및 이미지 크기 조정

CSS object-fit 사용 시: flexbox 컨테이너 내에서 이미지를 반응형으로 만들기 위해 포함합니다. 이 속성이 이미지 너비에 어떤 영향을 미치는지 이해하는 것이 중요합니다. 이미지 크기 조정에도 불구하고 레이아웃은 원래 이미지 크기를 유지하여 스크롤 막대가 발생할 수 있습니다.

object-fit: contain에서는 전체 이미지가 지정된 컨테이너 내에 유지되도록 비례적으로 이미지 크기가 조정됩니다. 종횡비. 이렇게 하면 이미지가 완전히 보이고 잘리는 것을 방지할 수 있습니다. 그러나 컨테이너 너비에 맞게 이미지 크기를 반드시 조정할 필요는 없습니다.

이 문제를 해결하려면 컨테이너의 CSS 너비 속성을 이미지에 원하는 특정 값이나 백분율로 설정해야 합니다.

예를 들어 다음 HTML이 있는 경우:

<code class="html"><div class="container">
  <img src="image.jpg" />
</div></code>

그리고 다음 CSS가 있습니다.

<code class="css">.container {
  width: 50%;
  height: 50%;
}

img {
  object-fit: contain;
}</code>

이미지 크기가 비례적으로 조정됩니다. .container 내에 들어가지만 이미지 너비는 원래 크기로 유지됩니다. 컨테이너의 너비에 맞추기 위해 .container의 너비를 백분율 또는 절대값으로 지정할 수 있습니다.

<code class="css">.container {
  width: 100vw;  // 100% of the viewport width
}

// or

.container {
  width: 500px;  // 500 pixels
}</code>

object-fit: contain은 컨테이너 내에서 이미지가 표시되는 것만 보장한다는 점을 기억하세요. 자르지 않고. 컨테이너의 너비에 맞게 이미지 크기를 구체적으로 조정해야 하는 경우 이에 따라 컨테이너의 너비 속성을 설정해야 합니다.

위 내용은 object-fit을 사용하여 이미지 크기를 적절하게 조정하는 방법: 포함의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!