종횡비를 유지하면서 CSS에서 이미지 크기를 강제로 조정하려면 어떻게 해야 합니까?

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

웹 개발에서 이미지를 다룰 때 원본 가로 세로 비율을 유지하는 것이 중요합니다. 왜곡. 기본적으로 너비 및 높이와 같은 CSS 속성을 사용하여 이미지 크기를 조정하면 가로 세로 비율이 변경될 수 있습니다.

문제 해결

이 문제를 해결하기 위해 CSS 규칙을 사용할 수 있습니다. 종횡비를 유지하면서 크기를 강제로 조정합니다. 다음 코드 조각은 이 기능을 구현합니다.

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

디스플레이: block; 속성은 이미지가 블록 요소처럼 동작하여 사용 가능한 전체 너비를 차지하도록 보장합니다. 최대 너비: 500px; 이미지의 최대 너비를 설정하여 500픽셀을 초과하지 않도록 합니다.

결정적으로 width: auto; 높이: 자동; 이미지의 가로 세로 비율을 유지하면서 자동으로 크기를 조정할 수 있습니다. 즉, 이미지의 높이가 왜곡되거나 늘어나거나 찌그러지지 않고 지정된 최대 너비에 맞게 크기가 조정됩니다.

사용 예

다음 코드를 고려하세요.

<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">

이 이미지에 CSS 규칙을 적용하면 지정된 최대 너비 내에서 크기가 강제로 조정됩니다. 화면비를 유지합니다.

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