종횡비를 유지하면서 HTML에서 이미지 크기를 어떻게 조정할 수 있습니까?

이미지 크기 조정 중 가로 세로 비율 유지

이미지 작업 시 이미지가 올바르게 표시되도록 가로 세로 비율을 유지하는 것이 중요합니다. 그러나 HTML에서 너비와 높이 속성을 모두 지정하면 왜곡이 발생하는 경우가 많습니다.

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

<img src="big_image.jpg" width="900" height="600" alt="" />

가로세로 비율을 유지하면서 이미지 크기를 조정하려면 다음 CSS를 적용하세요. 규칙:

img {
    display: block;
    max-width: 500px;
}

디스플레이: block; 속성은 이미지가 블록 요소처럼 동작하도록 보장하여 컨테이너의 너비를 채울 수 있도록 합니다. max-width 속성은 이미지의 최대 너비를 설정하여 높이를 유지하면서 해당 너비를 초과하지 않도록 합니다.

이 CSS는 다음 HTML에도 적용됩니다.

<p>This image is originally 400x400 pixels, but should get resized by the CSS:</p>
<img width="400" height="400" src="https://i.sstatic.net/aEEkn.png" />

이 접근 방식을 사용하면 지정된 최대 너비를 준수하면서 가로 세로 비율을 유지하면서 다양한 크기의 이미지가 비율에 맞게 크기가 조정됩니다.

위 내용은 종횡비를 유지하면서 HTML에서 이미지 크기를 어떻게 조정할 수 있습니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!