How to maintain the image ratio

이미지가 기기의 사이즈 별로 크기가 변해야 할 때 이미지의 비율을 유지하는 방법을 알아봅니다.

이미지 비율 유지하기

이미지의 비율을 유지하려면 width 또는 height 중 하나를 고정하고 다른 하나를 auto로 설정하면 됩니다.

img {
  width: 100%;
  height: auto;
}

이렇게 하면 이미지의 너비가 부모 요소의 너비에 맞게 조절되고, 높이는 비율에 맞게 자동으로 조절됩니다.

배경 이미지를 사용할 때도 이미지의 비율을 유지할 수 있습니다.

.bg-image {
  width: 100%;
  padding-top: 56.25%;
  background-image: url('image.jpg');
  background-size: cover;
}

padding-top 속성을 사용하여 이미지의 비율을 유지하고, background-size 속성을 사용하여 이미지를 조절합니다.

aspect-ratio 속성을 사용하면 이미지의 비율을 유지할 수 있습니다.

img {
  width: 100%;
  aspect-ratio: 16 / 9;
}

aspect-ratio 속성은 이미지의 비율을 유지하면서 이미지의 크기를 조절할 수 있습니다. 16 / 9 값은 이미지의 가로 세로 비율을 나타냅니다.