Div 내에 이미지를 맞추면서 종횡비를 유지하는 방법은 무엇입니까?

Div 내에 이미지를 맞추는 동안 가로 세로 비율 유지

제한된 공간에 이미지를 표시할 때 가로 세로 비율을 손상시키지 않고 맞추는 것이 바람직한 경우가 많습니다. HTML과 CSS는 이를 달성하기 위한 우아한 솔루션을 제공합니다.

접근 방식

이미지의 가로 세로 비율을 유지하는 핵심은 max-height 및 max-width CSS 속성을 활용하는 것입니다. 구현 방법은 다음과 같습니다.

1. div 높이 및 너비 설정: 이미지를 포함할 div의 원하는 높이와 너비를 결정합니다.

2. 최대 높이와 ​​최대 너비를 image:

   • max-height: 100%;: 이미지 높이가 div의 높이를 초과하지 않도록 합니다.
   • max-width: 100%;: 이미지를 방지합니다. div 위로 넘치지 않는 너비 width.

이렇게 하면 이미지가 가로 세로 비율을 유지하면서 div 경계 내에서 축소되거나 확장됩니다.

예

다음 HTML 및 CSS 코드를 고려하세요.

<div>

이 예에서 이미지는 "my-image.jpg"는 원래 비율을 유지하면서 48x48 div에 맞도록 크기를 동적으로 조정합니다.

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