화면 너비가 바뀌어도 이미지나 카드 요소의 종횡비를 일정하게 유지하려면 어떻게 해야 할까요?

이렇게 답해 보세요 (핵심 답변)

요소에 aspect-ratio: 16 / 9처럼 원하는 가로세로 비율을 선언하고 가로와 세로 중 적어도 한 축의 크기를 자동(auto)으로 두면, 너비가 변할 때 브라우저가 비율에 맞춰 높이를 계산합니다. 이때 내부에 들어가는 이미지나 비디오는 원본 비율이 다를 수 있으므로 object-fit: cover나 contain을 함께 지정해 잘라낼지 여백을 남길지 결정합니다. 만약 width와 height를 둘 다 고정해 버리면 선호 비율보다 지정된 크기가 우선될 수 있습니다.

함께 설명하면 좋은 이유 (꼬리질문 대비)

1. 박스 자체의 종횡비를 유지하는 것과 그 안의 이미지 콘텐츠를 찌그러지지 않게 채우는 방식(object-fit)은 나누어 설정해야 합니다.
2. 내부 텍스트가 길어져 최소 높이 제약을 넘기면 기본 설정에서는 콘텐츠가 넘치지 않도록 박스 높이가 비율보다 더 늘어날 수 있습니다.

면접에서 자주 하는 실수

aspect-ratio 속성만 넣으면 내부 콘텐츠 넘침이나 이미지 왜곡이 전부 자동으로 해결된다고 생각하면 안 됩니다.