CSS로 크기를 조정하는 동안 이미지 종횡비를 어떻게 유지할 수 있습니까?

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

이미지 가로 세로 비율은 크기 조정 시 이미지의 원래 비율을 유지하는 데 중요합니다. 이 문제는 이미지에 너비 및 높이 속성이 사전 정의되어 있고 추가 CSS 규칙이 적용되면 더욱 분명해집니다.

예를 들어 아래 제공된 코드에서 "big_image.jpg" 이미지의 높이와 너비는 명시적으로 600으로 정의되어 있습니다. 및 900픽셀:

<img src="/static/imghwm/default1.png" data-src="big_image.jpg" class="lazy"    style="max-width:90%"  style="max-width:90%" alt="">

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

img {
    max-width: 500px;
}

그러나 이 CSS 규칙은 이미지를 적절한 크기로 축소하지 못할 수 있습니다. 이 문제를 해결하려면 추가 CSS 속성을 사용해야 합니다.

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

이러한 CSS 속성을 사용하면 "big_image.jpg" 이미지의 크기가 가로 세로 비율을 유지하면서 조정됩니다. 이는 다음 HTML 및 CSS 코드로 설명됩니다.

<p>This image is originally 400x400 pixels, but should get resized by the CSS:</p>
<img  src="/static/imghwm/default1.png" data-src="https://i.sstatic.net/aEEkn.png" class="lazy"    style="max-width:90%"  style="max-width:90%" alt="CSS로 크기를 조정하는 동안 이미지 종횡비를 어떻게 유지할 수 있습니까?" >

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