종횡비를 유지하면서 CSS의 경계 상자에 맞게 이미지 크기를 조정하려면 어떻게 해야 합니까?

경계 상자에 맞게 이미지 크기 조정

CSS만 사용하여 경계 상자 내에서 이미지 크기를 비례적으로 조정하는 것은 간단한 작업처럼 보입니다. 그러나 원하는 결과가 경계 상자의 한 차원을 완전히 채울 때까지 이미지를 확대하는 것이라면 이 접근 방식은 부족합니다.

CSS 전용 솔루션

다행히도, CSS3은 이 딜레마에 대한 해결책을 제공합니다. background-image 및 background-size 속성을 활용하여 필요에 따라 경계 상자 내에서 이미지 크기를 조정할 수 있습니다.

구현

이 솔루션을 구현하려면 다음 단계를 따르세요.

1. 경계 상자 만들기: 경계 상자 역할을 할 HTML 요소 내에 이미지를 포함합니다.
2. 배경 이미지 설정: 이미지를 경계 상자의 배경 이미지로 정의합니다.
3. 배경 포함 활성화: 배경 크기 지정: 포함하여 이미지 크기가 경계 상자 내에 맞게 조정되도록 합니다. 화면 비율을 유지합니다.

예

<code class="html"><div class="bounding-box">
  <!-- Image as background-image -->
</div></code>

<code class="css">.bounding-box {
  background-image: url(...);
  background-size: contain;
}</code>

추가 고려 사항

• 브라우저 호환성: 이 솔루션은 CanIUse.com에서 확인한 바와 같이 최신 브라우저와 호환됩니다.
• 이미지 중앙에 맞추기: 경계 상자 내에서 이미지를 중앙에 맞추려면 다음을 사용하세요. 다음 CSS:

<code class="css">.bounding-box {
  position: absolute;
  background-position: center;
}</code>

이러한 CSS 기술을 수용하면 원래 비율을 유지하면서 경계 상자를 채우도록 이미지 크기를 효과적으로 조정할 수 있습니다.

위 내용은 종횡비를 유지하면서 CSS의 경계 상자에 맞게 이미지 크기를 조정하려면 어떻게 해야 합니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!