CSS를 사용하여 Div 내부의 이미지 종횡비를 유지하는 방법은 무엇입니까?

Div 내 이미지의 가로 세로 비율 유지

가로 세로 비율을 유지하면서 div 내에서 이미지를 표시하는 것이 바람직한 경우가 많습니다. 이렇게 하면 이미지가 왜곡 없이 완전히 표시됩니다. 이를 달성하려면 특정 CSS 속성을 활용할 수 있습니다.

CSS를 사용한 솔루션:

이미지가 배치된 div 내부에서 다음 CSS 규칙을 이미지에 추가합니다. 요소:

max-height: 100%;
max-width: 100%;

이러한 CSS 속성은 브라우저에 div 경계 내에서 이미지 크기를 제한하도록 지시합니다. max-height 속성은 세로 크기를 제한하고, max-width 속성은 가로 크기를 제한합니다. 두 속성을 모두 100%로 설정하면 원래 가로 세로 비율을 유지하면서 이미지가 div에 맞게 축소됩니다.

예:

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

.image-container {
  width: 48px;
  height: 48px;
}

.image-container img {
  max-height: 100%;
  max-width: 100%;
}

이 예에서는 이미지의 가로 세로 비율을 유지하면서 48x48 div 안에 48x48 이미지를 맞춥니다. 이미지가 잘리거나 왜곡되지 않고 div 내에 완전히 표시되도록 크기가 조정됩니다.

위 내용은 CSS를 사용하여 Div 내부의 이미지 종횡비를 유지하는 방법은 무엇입니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!