aspect-ratio란?

The aspect-ratio CSS property sets a preferred aspect ratio for the box, which will be used in the calculation of auto sizes and some other layout functions.
영어라서 모르겠다. 하지만 파파고가 있다.
가로 세로 비율 CSS 속성은 상자에 대해 선호하는 가로 세로 비율을 설정하며, 이는 자동 크기 및 기타 레이아웃 함수의 계산에 사용됩니다.

한마디로 가로 세로 비율을 지정하는 것이다.

테두리 박스 사이즈는 400width입니당.

.card-image img {
  width: 100%;
}

여기서 4/1로 aspect-ratio를 바꿔버리면

.card-image img {
  width: 100%;
  aspect-ratio: 4/1; aspect-ratio : 4 랑 똑같습니당 숫자를 하나만 사용하면 자동으로 세로 비율은 1로 지정됨
}

ㅠㅠ 찌부된 무녀가 나온다

aspect-ratio:auto를 해주면 해당 이미지의 고유한 비율로 지정해준다

auto 와 비율을 동시 사용가능!

만약 해당 요소에 고유한 비율이 있으면 auto가 적용되고 없으면 설정한 비율로 적용됨! 이미지 요소에는 고유한 비율이 있어서 auto가 적용된다능

.card-image img {
  width: 100%;
  aspect-ratio: auto 18/1;
}

빠잉 😇