이미지와 같은 요소는 너비 값을 px 등의 단위로 고정하기 쉽지 않다. 반응형 환경에서 고정으로 두면 화면의 크기에 따라 너무 커지거나 작아지기 때문이다. 그래서 %로 설정하는 경우가 있는데, 원본 사이즈가 1 : 2인 요소를 1 : 1 비율로 화면에 나타내야 하면 어떨까? 생각만 해도 머리가 아픈 상황이다. 기본적으로 이미지를 비율에 맞춰 자르려면 object-fit을 사용해서 본인은 처리하는데, object-fit을 사용하려면 고정적인 size를 가져야한다. 하지만 앞서 말한 것처럼 고정적인 값을 가지면 반응형 환경에서 문제가 생긴다. 이도저도할 수 없는 최악의 상황이다. 여기서 도움을 주는 것이 aspect-ratio이다. aspect-ratio 요소의 크기를 비율대로 조정할 수 있는 css 속성이..