CSS img 태그 비율 유지하는 법

HTML의 태그는 원본 이미지의 가로세로 비율을 기본적으로 유지하는 특성을 가짐
만약 img의 width만 지정하고 height: auto를 설정하면 높이가 자동으로 계산되어 width에 맞춰 비율이 계산됨
반대로 height만 지정하고 width: auto를 설정해도 너비가 자동으로 계산되어 비율이 유지됨

/* 너비 기준 */
img {
  width: 300px;
  height: auto;
}

/* 높이 기준 */
img {
  width: auto;
  height: 200px;
}

width :고정 너비 + height: auto → 비율 유지
height :고정 높이 + width: auto → 비율 유지
width와 height를 모두 고정값으로 지정하면 원본 비율이 깨지게된다

---

한마디로 정리하면, width와 height 중 한쪽에만 고정값을 지정하고

반대쪽을 auto로 설정하면

원본 이미지의 비율(Aspect Ratio)을 유지한 채 나머지 크기가 자동으로 계산됨