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

가로세로 비율을 유지하면서 강제로 이미지 크기 조정

이미지 작업을 할 때 이미지의 크기를 특정 치수로 조정해야 하는 경우가 많습니다. 그러나 가로 세로 비율을 유지하면 이미지가 왜곡되거나 늘어지는 것을 방지할 수 있습니다.

초기 시도:

처음에는 지정된 크기와 사용자 정의 CSS 규칙을 사용하여 크기를 조정했습니다. 이미지는 있지만 화면 비율이 그렇지 않았습니다. 유지:

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

img {
  max-width: 500px;
}

해결책:

가로세로 비율을 유지하면서 이미지 크기를 강제로 조정하려면 다음 CSS 속성을 사용할 수 있습니다.

• display: block;: 이미지가 페이지 내에서 흐를 수 있도록 보장합니다. content.
• max-width:230px;: 이미지의 최대 너비를 설정합니다.
• max-height:95px;: 이미지의 최대 높이를 설정합니다.
• width: auto;: 이미지가 최대 너비 및 최대 높이 제약 조건 내에서 사용 가능한 공간을 자동으로 채울 수 있습니다.
• 높이: auto;: 이미지의 고유한 가로 세로 비율을 기준으로 높이를 자동으로 조정합니다.

결과:

다음 CSS 규칙을 이미지에 적용:

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

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

원래 화면비를 유지하면서 지정된 최대 크기 내에서 크기가 조정된 이미지가 생성됩니다. 비율.

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