종횡비를 유지하면서 강제로 이미지 크기 조정

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

초기 시도:

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

img {
  max-width: 500px;
}

해결책:

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

• 디스플레이: block;: 이미지가 페이지 콘텐츠 내에서 흐를 수 있도록 합니다.
• max-width:230px;: 이미지의 최대 너비를 설정합니다. image.
• max-height:95px;: 이미지의 최대 높이를 설정합니다.
• width: auto;: 이미지가 최대 너비 및 최대 너비 내에서 사용 가능한 공간을 자동으로 채울 수 있도록 허용합니다. -높이 제한.
• height: auto;: 이미지의 고유한 측면에 따라 높이를 자동으로 조정합니다. ratio.

결과:

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

This image is originally 400x400 pixels, but should get resized by the CSS:

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

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